Прежде всего, эта статья не о стилях элементов, основанных исключительно на их положении в дом. Некоторое время назад был небольшой ажиотаж, подталкивающий к меньшему количеству классов и более прямому нацеливанию через css. Я всегда видел в этом прямую атаку на гибкость и здравый смысл CSS, хотя я ценю чистую настройку HTML так же, как и следующий фронтендер. Новые псевдоселекторы css3 дают вам больше свободы для расширения этой концепции, но я не буду рассказывать вам, как это сделать.
В этой статье основное внимание будет уделено их использованию в плавающих многострочных блоках , в частности в элементах плавающего списка, которые занимают несколько строк. Один из элементов торговой марки, чтобы подтолкнуть людей начать использовать жидкие конструкции и макеты CSS.
расстояние фиксации
Со всеми подробностями, примерами и крошечными лазейками вы можете сами ознакомиться со спецификациями w3C . Сетка, которую мы будем использовать для нашего примера, является сеткой элементов списка 3х3. Код ниже дает нам базовый макет:
1/ ul {padding:1em;}
2/ ul li {float:left; margin:0em 1em 1em 0em;}
3/ ul li:nth-child(3n) {margin-right:0;}
4/ ul li:nth-last-child(-n+3) {margin-bottom:0;}
Основная проблема всегда была с расстоянием между отдельными элементами, связанными с их родителем. Поскольку элементы блока плавают, поля не будут разрушаться. Если вы стремитесь к равномерно расположенной сетке, вторая строка CSS выше оставит слишком много правого и нижнего промежутка родительского элемента. Нам нужно удалить правое поле на каждом третьем элементе и удалить нижнее поле на всех трех нижних элементах.
С помощью третьего оператора CSS мы можем нацелить каждый третий элемент списка. ‘N’ принимает увеличивающиеся целочисленные значения и сопоставляет его с элементами в dom. Четвертое утверждение CSS делает то же самое для трех последних пунктов списка. Синтаксис немного менее прозрачен, но все равно работает.
Если горизонтальный размер сетки изменяется, вам просто нужно адаптировать число 3 в этих селекторах CSS. Не идеально, поскольку нам нужно адаптировать несколько значений для одного эффекта, но по крайней мере это работает.
добавление углов
Добавляя некоторую сложность к нашей маленькой установке, мы теперь хотим закругленные углы в каждой угловой точке сетки. На нашей сетке 3х3 это означает добавление угла к первому, третьему, седьмому и последнему элементу списка. Следующий код делает именно это:
1/ ul li:first-child {border-top-left-radius:10px;}
2/ ul li:last-child {border-bottom-right-radius:10px;}
3/ ul li:nth-child(3) {border-top-right-radius:10px;}
4/ ul li:nth-last-child(3) {border-bottom-left-radius:10px;}
Достаточно просто, хотя и немного жестко и долго. И, конечно же, для того, чтобы он работал в Safari, Chrome и Firefox, вам нужно добавить много дерьма от поставщиков браузеров.
Проверьте первый пример на тестовой странице, чтобы увидеть, как он работает .
что не нравится
Несмотря на то, что эта настройка работает замечательно во всех последних версиях браузеров, сама идея падает только при удалении одного элемента списка. Вы можете добавлять или удалять полные строки без каких-либо проблем, и решение для исправления полей работает во всех случаях, но закругленные углы будут заканчиваться на неправильных элементах, так как мы нацеливаем их на: варианты last-child.
Здесь нам не хватает концепции строк. «Седьмой» дочерний элемент в нашем примере действительно является «первым элементом последней строки». Это не может быть выражено в CSS, поэтому мы все еще должны прибегнуть к обходным путям. Я понятия не имею, насколько сложно это может быть реализовано (хотя я полагаю, что это не должно быть так сложно, так как браузеры должны знать, что в любом случае оно должно переходить на другую строку), но для подобных случаев это оказалось бы чрезвычайно полезным.
Еще одним требованием к нашему решению является то, что элементы в пределах размера сетки относятся к их родителям. Если элементы списка имеют фиксированную ширину в пределах em-макета, увеличение страницы снова нарушит нашу CSS.
разумное решение
Есть еще одно решение, но оно работает только теоретически (и каким-то образом испорченным способом Webkit). Вместо того, чтобы устанавливать закругленные углы на элементах списка, мы могли бы поместить их на обертку вокруг него. Таким образом, мы будем уверены, что они попадут в четыре угла нашей сетки.
1/ ul {overflow:hidden; border-radius:10px; }
2/ ul li {float:left;}
3/ ul li:nth-child(3n) {margin-right:0;}
4/ ul li:nth-last-child(-n+3) {margin-bottom:0;}
К сожалению, вспоминая мою предыдущую статью о проблеме с закругленными углами , нет способа предотвратить визуальное оформление элементов списка от перетекания по закругленным углам, определенным для элемента ul. Только в Webkit, используя ужасно неправильно используемое свойство overflow: hidden, вы можете исправить это поведение.
Поэтому, хотя в теории это решение является более надежным и гибким, оно просто не работает так, как должно. Когда мы все еще верили, что css3 исправит все наши проблемы …
Посмотрите второй пример на тестовой странице, чтобы увидеть, как он работает (в Safari / Chrome) .
заключение
В то время как css3 предоставит нам более широкий набор инструментов для работы, позволяя нам делать больше с ограниченным количеством html, он все еще далек от совершенства. Даже общие шаблоны трудно реализовать гибкими, достойными наилучшей практики способами. Чем больше я играю с возможностями css3, тем больше я возвращаюсь к той же устаревшей концепции обходного пути, исправлений и альтернативных методов. Это несколько удручающее понимание.