CSS обладает огромной силой. Есть свойства и значения для любого количества удивительных дизайнов. Со всей этой мощью приходится многое помнить.
Если вы не знаете обо всех инструментах в вашем наборе инструментов, как вы найдете подходящий для работы?
В этом посте мы рассмотрим три редко используемых, но очень полезных инструмента для различных задач в CSS.
Как получить удобочитаемую длину строки с единицей ch
В CSS существует множество удивительных единиц измерения длины, так зачем позволять px и rem получать удовольствие в одиночку?
Мы давно знаем, что длина строки во многом определяет то, насколько легко человек может читать контент. У нас было больше проблем с определением правильного размера со статической длиной, такой как пиксели. Введите chединицу длины в CSS.
Определение ch — это ширина 0 символа в текущем размере шрифта. Хотя это и не идеально, это позволяет нам указать ширину столбца контента, равную «идеальному» количеству символов. В статье Smashing Magazine, ссылка на которую приведена выше, автор указывает, что удобная длина строки должна составлять от 45 до 85 символов. Вместо того, чтобы выполнять вычисления и определять правильное количество пикселей, мы можем заменить «символьную единицу», чтобы сохранить баланс.
.centered-column {
width: 90vw;
max-width: 75ch;
margin-left: auto;
margin-right: auto;
}
С помощью этого фрагмента у вас теперь есть столбец по центру, который никогда не будет превышать максимальную рекомендацию.
Если вы отрегулируете размер шрифта в различных контрольных точках, максимальная ширина столбца будет увеличиваться или уменьшаться. Если вы решите изменить шрифты, максимальная ширина изменится.
Одно предостережение, которое я здесь сделаю, это то, что вы не хотите использовать это для точных измерений. Это всегда должно быть приближением. Поскольку chустройство отключает глиф 0 в шрифте, в каждой строке может быть больше или меньше символов. Возьмем этот относительно простой пример.
На изображении выше только два Mсимвола помещаются рядом в том же пространстве, что и четыре 0символа. Это потому, что каждая заглавная буква М имеет ширину примерно 36 пикселей; каждый 0 равен 20 пикселям. Объедините это с каждым шрифтом, имеющим разные глифы, и вы получите что-то неточное. Так как наш пример кода не беспокоится о точности и просто хочет, чтобы длина строки составляла около 75 символов, мы в безопасности.
Как упростить ваш CSS с помощью селекторов атрибутов CSS
Я не слишком удивлен, что chюниты не пользуются большой популярностью. Они чувствуют себя очень связанными с проблемами дизайна. Селекторы атрибутов, однако, шокируют меня своей бесполезностью. Они настолько универсальны и кажутся очень программными.
По своей сути селекторы атрибутов позволяют вам выбрать элемент HTML, который имеет определенный атрибут или имеет определенное значение атрибута.
Одно из моих любимых новых применений селектора атрибутов связано с новым ресетом CSS Энди Белла.
В своем сбросе, полном хорошо продуманных конфигураций, он использует селекторы атрибутов для удаления полей и отступов только из ulей и olь, которые имеют классы. Мысль заключается в том, что если вы устанавливаете класс для элемента, вы, вероятно, сбрасываете стили списка. Если у вас нет класса, вам, вероятно, нужен маркированный или нумерованный список.
ul[class],
ol[class] {
padding: 0;
margin: 0;
}
Вы также можете применить это к тегам привязки, у которых есть атрибут target. Используйте это в сочетании с элементом ::after, чтобы добавить небольшой значок для ссылок, которые будут вести пользователя во всплывающее окно.
a[target] {
padding-right: 2ch;
}
a[target]::after {
background-image: url(icon.svg);
width: 1.75ch;
height: 1em;
...etc.
}
Используя тот же метод для значков, вы можете применить логотип Twitter к любым URL-адресам, начинающимся с URL-адреса Twitter.
a[href^="https://example.com"] {
...styles
}
Это будет нацелено на любой тег привязки href, начинающийся со строки «https://example.com».
И наоборот, вы также можете проверить конец строки, чтобы, возможно .pdf, найти все ссылки на PDF-файлы на странице.
a[href$=".pdf"] {
...styles
}
Есть так много полезных рецептов, которые вы можете придумать с помощью селекторов атрибутов. Я хочу, чтобы больше людей знали о них и использовали их.
Как создать несколько столбцов плавного текста или элементов с помощью CSS Multi-column
Еще до того, как CSS Grid стал доступен, мы могли выполнять некоторые незначительные действия в столбцах вне таблиц. CSS Multi-column — это спецификация, позволяющая размещать текст и элементы в нескольких столбцах.
Вы можете использовать его с любым объемом текста и задать ему либо определенное количество столбцов, либо ширину столбца для сопоставления.
Это может создать интересные межстраничные макеты в середине сообщения в блоге.
.column-content {
column-width: 250px; /* Columns with max-width of 250px
/* column-count: 2; Always 2 columns */
column-gap: 2rem; /* Columns with 2rem of space in between */
}
Вы можете сделать еще больше, например column-rule, для границ или column-spanдля создания разрывов в столбцах для новых заголовков.
Светлое будущее для CSS с прошлым
В то время как вторая половина 2010-х была удивительной для нового CSS (таких вещей, как Flexbox и Grid), важно помнить, что в прошлом было много дополнительных возможностей.
Функции, упомянутые в этом посте, были в браузерах в течение многих лет и мало используются. Экспериментируя с новыми классными игрушками в этот праздничный сезон, не забывайте вспоминать классные игрушки прошлого.