Даже если вы опытный веб-дизайнер, есть много непонятных свойств CSS, которые вы вряд ли когда-либо будете использовать. Фактически, с сотнями поддерживаемых свойств, есть части CSS, о которых вы, вероятно, никогда даже не узнаете. Некоторые стоит знать, несмотря на их необычность.
Благодаря отчету Google Platform Status вы можете узнать, какие свойства используются меньше всего, и, возможно, узнать о новом мощном свойстве, пока вы этим занимаетесь. Я вытащил некоторые из самых интересных. Некоторые из этих свойств CSS являются экспериментальными, специфичными для браузера или иным образом не реализованы широко. Но все свойства, представленные здесь, хорошо поддерживаются текущими браузерами; они просто редко используются.
1 пустые ячейки
Это свойство специфично для таблиц, и вы можете использовать его в сочетании с border-collapse: separate. Оно управляет тем, будут ли ячейки без видимого содержимого показывать свой фон и границы.
Вот пример таблицы с одной пустой ячейкой и другой, охватывающей ячейку под ней:
Яблоки
4
Виноград
Бананы
4
9
Поскольку пустая ячейка не имеет никакого содержимого, ею можно управлять с помощью пустые-клетки имущество:
тд {
пустые-клетки: скрыть;
}
Теперь все ячейки таблицы без видимого содержимого перестанут отображать цвет фона или границу:
Этот эффект может быть особенно полезен для больших таблиц, помогая четко определить отсутствующие или необычные данные. Обратите внимание, что таблица со схлопывающимися границами будет продолжать показывать как границы, так и фон, даже если пустые ячейки скрыты с помощью этого свойства.
2 текст-подчеркивание-позиция
Более четырех из пяти веб-сайтов используют свойство text-decoration, часто для управления подчеркиванием ссылок. Но значение underline для этого свойства может сопровождаться менее часто используемым свойством, текст-подчеркивание-позиция:
{
текст-оформление: подчеркивание;
текст-подчеркивание-позиция: под;
}
При значении «под» подчеркивание будет смещаться вниз, так что оно не будет пересекаться с нижними выносными элементами в таких буквах, как j и g. Это может улучшить читаемость, особенно при более коротких настройках высоты строки.
До этого свойства обычным обходным путем было эмулировать подчеркивание нижней границей. Однако этот подход имеет нежелательные побочные эффекты и может быть неудобен в управлении, поэтому хорошо, что вам больше не нужно к нему прибегать.
3 столбца-пролет
Столбцы — довольно редко используемое свойство CSS, представленное на менее чем 3% всех веб-страниц. Долго имитируемые с помощью обходных путей, таких как display: float, столбцы также страдали от несоответствий между браузерами и отсутствия четкого понимания; они не предназначены для макета общего назначения, ребята!
Однако при использовании для воссоздания традиционных газетных колонок это свойство может добавить интереса к текстам, перегруженным текстом, и улучшить читаемость. Они особенно полезны, когда вы хотите использовать всю ширину больших экранов, например, тех, которые используются для настольных дисплеев.
Команда пролет колонны Свойство решает проблему необходимости выхода из макета столбцов в середине блока, заставляя элемент охватывать несколько столбцов, фактически игнорируя их:
В этом примере охват прост:
h1, h2 { охват столбцов: все }
Это простое свойство, имеющее всего два значимых значения: none (по умолчанию) или all. Значение all указывает, что элемент должен игнорировать столбцы и растягиваться на все присутствующие. В отличие от похожего атрибута HTML для ячеек таблицы, colspan, нет поддержки числового значения, охватывающего только некоторые столбцы; это все или ничего.
Любопытно, что свойство column-gap используется более чем 30% веб-страниц, в десять раз больше, чем число, использующее свойство columns. Это связано с тем, что column-gap расширился [tk] и теперь применяется к макетам за пределами столбцов, таким как flexbox и grid.
4 сетка
Команда сетка property — интересный случай. Макеты Grid сейчас очень популярны в целом, о чем свидетельствует использование grid-template-columns на 42% страниц. Но простая краткая запись grid крайне непопулярна, она используется менее чем на половине процента страниц.
Возможно, это потому, что grid — это такое сложное сокращение, объединяющее все свойства сетки в одном. Вот несколько примеров объявлений, которые принимает это свойство:
сетка: «a» 100px «b» 1fr;
сетка: минмакс(400px, мин-контент) / повтор(автозаполнение, 50px);
сетка: 30% / автоматическая плотность потока;
сетка: автоматическая плотность 40% / [line1] minmax(20em, max-content);
Неудивительно, что дизайнеры предпочитают отдельные свойства, такие как grid-template-columns (42%), grid-column (23%) и grid-gap (19%). Но, как и все сокращенные свойства, grid может сэкономить время и сложность, а также сделать ваш CSS более удобным для поддержки. Однако будьте осторожны: чрезмерное использование также может сбивать с толку, поэтому рассмотрите возможность использования длинных свойств, таких как grid-auto-flow, для ясности, где это уместно.
5 начальных букв
Буквица (капитальная буква) относится к особому стилю первой буквы абзаца или блока текста. Вы можете увидеть этот стиль в книгах или журналах, где начальная буква намного больше, тяжелее и часто поставляется с богато украшенным или другими стильными завитушками.
Этот эффект раньше был возможен, но только при использовании свойства float с некоторыми осторожными настройками связанных стилей. начальная буква Свойство упрощает это, используя простое значение, указывающее масштаб этой буквы:
п {
/* 3 строки в высоту */
начальная буква: 3;
}
Вы также можете указать второе значение, определяющее базовую линию буквицы:
п {
/* Высота 2 строки, базовая линия опускается на 1 строку */
начальная буква: 2 1;
}
Используя эти значения, вы можете управлять размером и вертикальным положением буквиц:
6 текст-выделение
Команда текст-выделение Свойство не имеет ничего общего с тегом em (выделение) или курсивным значением для font-style, которое может использоваться для имитации внешнего вида выделенного текста. Вместо этого, это способ выделения текста, немного похожий на подчеркивание. Главное отличие в том, что text-emphasis рисует определенный символ либо выше, либо ниже отдельных символов.
п {
выделение текста: закрашенный двойной круг красного цвета;
}
.информация {
выделение текста: «!»;
}
Вы можете использовать свойство text-emphasis-position для отображения отметок за or недооценивают ее текст в горизонтальном режиме письма. Но это свойство стиля text-emphasis, которое становится действительно интересным (text-emphasis — это сокращение для обоих). Вы можете использовать значение, например «треугольник» или «круг», чтобы использовать общий символ. Вы также можете использовать любой символ Unicode в кавычках, включая эмодзи:
«Сезам» — типографский знак, используемый в восточноазиатских языках для выделения. Поскольку text-emphasis поддерживает этот символ, ваш CSS теперь может законно включать значение «откройся сезам».
7 стиль переноса текста
Команда стиль переноса текста Свойство является самым новым в этом списке, его поддержка в последних браузерах появится в октябре 2024 года. Когда текст внутри элемента переносится, это свойство подсказывает браузеру, какой должен быть его приоритет.
Две наиболее значимые ценности: довольно и (баланс). Первый вариант предполагает, что браузер должен оптимизировать макет, а не скорость. Он должен включать такие улучшения, как сведение количества бесхозных элементов к минимуму. Между тем, баланс должен гарантировать, что количество символов в каждой строке будет максимально близким.
Поскольку это поучительно, а поддержка все еще новая, вы можете не заметить большой разницы при использовании этого свойства. Лучший способ попробовать это — поэкспериментировать на существующих страницах и посмотреть, каковы будут различные эффекты. В любом случае, однако, это совершенно безопасно использовать, поскольку эффект едва заметный, с разумным значением по умолчанию.
