От автора: веб-сообщество, по большей части, было впечатляюще открытым местом. Таким образом, многие лучшие методы развития происходят прямо в открытом доступе, в блогах и на форумах, развиваясь по мере их обновления и улучшения. Я думал, что это может быть забавно (и увлекательно) на самом деле следовать этому творческому обмену. Взглянуть на популярный трюк Clearfix CSS и узнать, как именно выглядит технология веб-дизайна.
Clearfix, для тех, кто не знает, является CSS-хаком, который решает постоянную ошибку, которая возникает, когда два плавающих элемента укладываются рядом друг с другом. Когда элементы выравниваются таким образом, родительский контейнер заканчивается высотой 0, и он может легко поломать макет. Все, что вы, возможно, пытаетесь сделать, это расположить боковую панель слева от основного блока содержимого, но результатом будет два элемента, которые перекрываются друг с другом и сворачиваются друг на друга. Усложняет ситуацию еще и то, что этот баг по-разному ведет себя в браузерах. Clearfix был изобретен для решения всего этого.
Ранняя иллюстрация проблемы с Position is Everything
Но чтобы понять clearfix, вам нужно вернуться еще дальше, в 2004 год и к определенной технике, Holly hack.
2004: Holly Hack и происхождение Clearfix
Холли-хак назван в честь своего создателя Холли Бегевина, разработчика и блоггера в CommunityMX. Холли-хак объединяет два разных метода CSS, которые работали во времена Netscape Navigator и Internet Explorer (IE) 4 для решения некоторых проблем с макетом. Бежевин заметил, что если вы применяете высоту всего лишь 1% для каждого из перемещаемых элементов в вышеприведенном сценарии, проблема действительно будет исправлена (и только потому, что она активировала совершенно другую ошибку) в Internet Explorer для Windows.
К сожалению, трюк с 1% не работал на Mac. Для этого Begevin добавил условный комментарий, который использовал обратную косую черту внутри ее CSS, что, как ни странно, заблокировало отдельные правила CSS из IE для Mac в старые времена. Результатом стал трюк CSS, который выглядел так:
/* Hides from IE5-mac \*/
* html .buggybox {height: 1%;}
/* End hide from IE5-mac */
Странно, я знаю, но все становится только сложнее.
В том же году, в мае, было еще несколько браузеров, и не все из них могли быть исправлены одной строкой CSS. Тони Аслетт опубликовал новую тему на своей доске объявлений, CSS Creator, предложив новый подход. Он назвал трюк clearfix, потому что он сосредоточился на очистке плавающих элементов, чтобы исправить проблему.
Подход Аслетта использовал то, что было в то время еще очень новыми псевдоселекторами CSS (в частности :after), чтобы автоматически очистить два плавающих элемента. В первой версии Clearfix Аслетта был один довольно массивный недостаток. Не зная о холли-хаке, код Аслетта требовал немного JavaScript для исправления проблем, которые специально появлялись в IE для Mac. В те дни JavaScript был относительно непроверенной технологией, и полагаться на него таким фундаментальным способом было менее идеальным.
К счастью, веб-сайт является местом итерации, и один пользователь панели объявлений указал Аслетту в направлении вышеупомянутого Холли Хака. Пользуясь условным комментарием Бежевина, Аслетт смог избавить свой код от JS практически в каждом браузере.
.floatcontainer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
} /* Mark Hadley's fix for IE Mac */ .floatcontainer { display: inline-block;
} /* Hides from IE Mac \*/
* html .floatcontainer {height: 1%;}
.floatcontainer{display:block;}
/* End Hack */
Если вы хотите выделить важный фрагмент истории и инноваций в Интернете, обсуждение, которое последовало за сообщением Аслетта о clearfix — отличное место для начала. Один за другим люди начали экспериментировать с новой техникой, тестируя ее в неясных браузерах и устройствах. После они отправили свои результаты в поток сообщений, иногда рядом с полезной настройкой.
Например, пользователь zulaica указал, что в браузерах Mozilla нижняя граница плавающих элементов должна быть явно определена. Пользователь pepejeria заметил, что вы можете оставить точку из контента, а пользователь co2 протестировал clearfix в самой первой версии браузера Safari от Apple. Каждый раз Аслетт обновлял свой код до тех пор, пока после нескольких быстрых итераций clearfix не был готов и, благодаря сообществу, стал пуленепробиваемым.
2006: Clearfix получает обновление
Но браузеры продолжали продвигаться вперед. Некоторые из более причудливых битов кода clearfix работали из-за ошибок, которые были встроены в старые браузеры. Поскольку браузеры исправляли эти ошибки, в новых версиях clearfix переставал работать. Когда IE 7 вышел в конце 2006 года, для его работы потребовалось несколько корректировок.
К счастью, Джон «Большой Джон» Галлант поддерживал страницу в своем блоге Position is Everything, с обновленной версией clearfix. Получив некоторые отзывы от своих читателей, Галлант обновил свой блог, чтобы отразить несколько новых исправлений для IE 7, используя новый условный комментарий, который будет работать внутри Internet Explorer.
<style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } </style><!-- main stylesheet ends, CC with new stylesheet below... --> <!--[if IE]>
<style type="text/css"> .clearfix { zoom: 1; /* triggers hasLayout */ } /* Only IE can see inside the conditional comment and read this CSS rule. Don't ever use a normal HTML comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
И снова пользователи перешли в свои собственные браузеры, чтобы проверить последний код, чтобы обеспечить его работу повсюду. И еще раз, какое-то время он работал.
2010: перезагрузка Clearfix
Фактически, эта итерация clearfix продлится до 2010 года, когда команда на Yahoo! User Interface Library (YUI) заметила несколько проблем с clearfix. Например, Holly Hack уже давно ушел (IE 5 был всего лишь дистанционной памятью), и после переключения блоковой модели поля были обработаны по-разному современными браузерами.
Но людям в YUI все равно нужно было выстроить один элемент рядом с другим. Фактически, потребность была только увеличена, поскольку дизайнеры экспериментировали с более продвинутыми схемами сетки. В 2010 году было очень мало вариантов компоновки сетки, поэтому clearfix пришлось работать. В итоге они придумали несколько дополнительных настроек в наборе правил CSS, прежде всего, используя преимущества доступных псевдоселекторов (:before и :after), чтобы очистить любые поля. Они отправили свой новый подход в свой собственный блог и назвали его «clearfix reloaded».
.clearfix:before,
.clearfix:after { content: "."; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1 ;} /* IE < 8 */
2011: Micro Clearfix
Но даже когда он был опубликован в 2010 году, обновление clearfix принесло с собой ненужный багаж из старых браузеров. Высота равна 0 больше не требовалась, и на самом деле трюк был намного более надежным, если вместо него использовалась display: table . Люди начали менять различные варианты техники на Twitter и в блогах. Примерно через год после перезагрузки clearfix разработчик Николас Галлахер скомпилировал эти варианты в гораздо более компактную версию хака, которую он соответствующим образом обозначил как micro clearfix.
После нескольких лет и небольших корректировок clear fix теперь требовал только четырех правил CSS:
/* * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
} .cf:after { clear: both;
} /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf { zoom: 1;
}
Конец Clearfix?
Сейчас, почти через 15 лет после того, как он был впервые предложен, clearfix теряет значимость. CSS Grid и Flexbox заполняют пробелы для расширенного макета в Интернете. В январе 2017 года Рейчел Эндрю написала статью для своего блога под названием «Конец clearfix?». В ней она описывает способ замены clearfix hack одной строкой кода, используя новое правило режима отображения, известное как flow-root.
.container { display: flow-root; } Мы приближаемся к тому моменту, когда clearfix больше не понадобится.
Даже без flow-root, есть много способов сделать сетку в эти дни. Если бы вы только начали работать в Интернете, было бы мало оснований даже об этом узнавать. Это хорошая вещь! С самого начала это всегда означало как обходное решение, чтобы сделать все возможное. Ирония заключается в том, что без самоотверженности и экспериментов с разработчиками, которые на протяжении многих лет хакали clearfix, у нас не было бы инструментов сегодня, чтобы никогда больше не полагаться на это.
Автор: Jason Hoffman
Источник: https://css-tricks.com/
Редакция: Команда webformyself.