[Подробное резюме] Функциональные теги CSS, которые вы можете видеть (на)

внешний интерфейс
[Подробное резюме] Функциональные теги CSS, которые вы можете видеть (на)

Теги функций CSS, которые вы можете видеть (вверху)

Как и любой другой язык программирования, CSS имеет множество функций и мощных функций, и мы много раз использовали их, не замечая. Когда я недавно просматривал точки знаний в CSS, я внезапно обнаружил, что функции CSS, которые мы обычно используем, являются лишь небольшой частью структуры CSS, поэтому я обобщил знания о функциональных тегах CSS, надеясь получить более четкое представление о всем CSS. система знаний. понимание, может помочь другим, и расширить свою собственную базу знаний.

Подводя итоги, я находил все больше и больше функций с перерывами.Хотя я был счастлив открывать для себя новые знания, я также заметил, что многие элементы CSS не имеют полного черновика, который можно увидеть от начала до конца, а собрать можно только немного по битам.И w3.org и mdn столкнулись с проблемой, что сложно собрать полную информацию, могут быть пропуски, дайте пожалуйста кирпич.

Резюмировать не просто, надеюсь официалам сначала понравится, а потом прочитают, большое спасибо!

Что такое функциональные теги CSS

Первоначально функции CSS называлисьФункциональные обозначения CSS, который можно использовать для представления более сложных типов в CSS или для вызова специальной обработки.Синтаксис обычно используется как имя функции, а затем левая скобка, параметры, правая скобка, в скобках могут быть пробелы, которые также могут иметь несколько параметров.Формат аналогичен значениям свойств CSS.

Когда нам нужно реализовать стиль CSS, который необходимо вычислить, нам обычно нужно использовать JavaScript, но в некоторых случаях можно использовать функцию CSS. (Если логика сложная, автор все же рекомендует использовать JavaScript для достижения эффекта, что может облегчить поддержку кода в будущем.)

Синтаксис следующий:

selector {
  property: functional-notation( [argument]? [, argument]! );
}

Конечно, глядя непосредственно на синтаксис функциональных тегов, может быть сложно представить, как он выглядит в повседневном использовании. Это не просто понять, поэтому давайте сделаем пример.

взять каштан

Если вы хотите добиться следующего эффекта:

HTML-текст выглядит следующим образом:

	<ol class="test">
            <li>Node
                <ol>
                    <li>Node
                        <ol>
                            <li>Node</li>
                            <li>Node</li>
                            <li>Node</li>
                        </ol>
                    </li>
                    <li>Node</li>
                </ol>
            </li>
            <li>Node</li>
            <li>Node</li>
        </ol>

В качестве каталога документов с сервера может быть запрошен большой объем данных, генерирующий большое количество узлов DOM. Обычная обработка обычно заключается в добавлении нового узла в цикл при добавлении аналогичного узла.<li><span style="color:red;">1.1.1</span><a href="">Node</a></li>такие элементы. На данный момент нам нужно соединить строку и значение индекса цикла для генерации1.1.1этот номер.

for ( ... ) {
	// 已知的参数 index1, index2, index3...
	const str = `${index1}.${index2}.${index3}`
	// 下面的逻辑...
}

В зависимости от уровня вложенности этого каталога появится новая логика оценки.

Но на самом деле это совершенно не нужно, по логике, нас не волнует предыдущий номер, и мы даже не должны генерировать серийный номер DOM через JavaScript, как каталог, мы заботимся только об отрисовке следующего текста. К счастью, есть и другие способы реализовать функцию вышеуказанного серийного номера, один из которых можно легко реализовать с помощью функций CSS.

<style>
        ol{margin:0;padding:0;list-style:none;counter-reset:item;}
        li{padding-left:2em;}
        li:before{counter-increment:item;content:counters(item, ".") " ";color:#f00;}
</style>

Сразу же после цитирования этого CSS я обнаружил, что HTML-текст выше сразу изменился на тот, что показан на рисунке.countersРазметка функций CSS для удобства работы.

Общие функции CSS

Чтобы нам было легче составить представление о знаниях из этой статьи и запомнить их, я разделил функции в CSS на несколько категорий:

  • функция фонового изображения
  • Функция градиента
  • функция цвета
  • функция анимации
  • Графические функции
  • функция фильтра
  • функция преобразования
  • функция пользовательского свойства
  • Функция выбора псевдокласса
  • сеточная функция
  • математическая функция

В дополнение к вышеуказанным категориям также определены функции, которые все еще находятся в стадии разработки и устарели:

  • функция в разработке
  • Устаревшая функция

функция фонового изображения

Как следует из названия, функция фонового изображения — это функция, которую можно использовать для установки свойств фонового изображения элемента.Конечно, функция функции не обязательно устанавливает только фоновое изображение.

URL()

Функция url — одна из самых распространенных функций CSS, она может ссылаться на определенные ресурсы и загружать их. Включите изображения, шрифты и даже другие каскадные таблицы стилей. Конечно, с учетом производительности веб-страницы лучше всего ограничить количество загружаемых ресурсов, ведь каждый запрос является HTTP-запросом, что повлияет на загрузку других ресурсов.

@import('./other.css')

.test {
	background-image: url('https://sxyle.com/banner.png')
}

Поскольку это очень распространенная функция, но более подробное введение см. в MDN для получения подробной информации.

изображение()

Функция изображения по-прежнему处于开发状态的函数, на момент написания этой статьи ни один браузер формально не поддерживает его, но его мощные и практичные функции уже начали появляться. Его синтаксис на самом деле похож на функцию url, но его отличие в том, что его можно добавить после адреса источника изображения.идентификатор медиасегмента(начать по осям x и y, а также по ширине и высоте), чтобы отобразить часть исходного изображения. Часть изображения, определенная в параметрах, станетнезависимое изображение. Синтаксис следующий:

.back {
	background-image: image('https://sxyle.com/image.webp#xywh=0,20,40,60')
}

Помимо отображения части изображения, вы также можете предоставить альтернативное изображение для изображения:

.back {
	background-image: image('try.webp', 'try.svg', 'try.gif')
}
.back::before {
  content: image('try.webp', 'try.svg', 'try.gif')
}

В целом, это функция CSS, которая все еще находится в состоянии черновика, но имеет достаточный потенциал, чтобы стать звездой будущего.

элемент()

Функция элемента в настоящее время доступна только с префиксами в более высоких версиях браузеров FireFox, но функциональность, которую она предоставляет, также очень интересна. Он может генерировать значения в виде изображений из произвольных элементов HTML.

Глядя на одно только определение, может быть немного сложно понять, если вы представите его в общем виде: функция элемента может сделать один элемент DOM фоновым изображением другого элемента DOM, и это изображение обновляется в режиме реального времени, и фоновое изображение можно одновременно изменить, изменив элемент DOM.

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
  </div>
</div>

с помощью вышеуказанного-moz-element(), можно добиться следующих эффектов:

Здесь позаимствован пример из MDN, но его можно ясно понять поbackground:-moz-element(#myBackground1) no-repeat;Второй элемент div уже служит фоновым изображением для первого элемента div.

Эта функция находится вcanvasчто весьма полезно.

набор изображений ()

Используя эту функцию, вы можете указать список изображений, которые браузер будет использовать в качестве фона изображения в зависимости от разрешения браузера и скорости сети, что позволит браузеру выбрать наиболее подходящее изображение для пользователя.

.back {
	background-image: image-set("try.png" 1x, "try-2x.png" 2x, "try-print.png" 600dpi);
}

Это функция, которая значительно улучшает взаимодействие с пользователем. В будущем должны появиться более масштабные сценарии использования. В настоящее время только несколько браузеров могут использовать ее, добавляя префиксы.

Функция градиента

Сначала поясним смысл функции градиента, то есть при преобразовании одного цвета во множество других цветов будет сгенерирован градиент. Функции градиента помогают современным пользовательским интерфейсам добавлять изысканные и красивые дизайнерские решения, они могут задавать цвет градиента, положение цвета в области градиента и угол градиента. С точки зрения совместимости все новые браузеры по-прежнему поддерживаются и могут без проблем использоваться в конкретной производственной среде.

линейный градиент() и повторяющийся линейный градиент()

Функция линейного градиента должна быть одной из наиболее часто используемых сцен по сравнению с другими функциями градиента.

.back {
	background: linear-gradient(#00c13c, #9198e5);
}

Как и другие функции градиента, функция не имеет внутреннего размера, точный размер функции будет соответствовать размеру элемента, который ее использует.

Конкретные параметры линейного градиента включают угол градиента и ориентацию градиента.

Стоит также упомянуть, чтоrepeating-linear-gradient()функцию, потому что вlinear-gradient()Функция на самом деле не повторяется, поэтому различные эффекты стиля CSS могут быть достигнуты путем повторения функции градиента следующим образом:

.back {
  /* 一个倾斜45度的重复线性渐变,
     从蓝色开始渐变到红色 */
  background: repeating-linear-gradient(45deg, blue, red);

  /* 一个从右下角到左上角的重复线性渐变,
     从蓝色开始渐变到红色 */
  background: repeating-linear-gradient(to left top, blue, red);

  /* 一个由下至上的重复线性渐变,
     从蓝色开始，40%后变绿，
     最后渐变到红色 */
  background: repeating-linear-gradient(0deg, blue, green 40%, red);
 }

Заинтересованные друзья могут испытать это на себе.Лучший способ получить знания — это практика.

радиальный градиент() и повторяющийся радиальный градиент()

Радиальные градиенты состоят изЦентральная точка,форма краяКонтур и расположение,конечная точка значения цвета(цветовые точки).

Центральная точка радиального градиента к форме края и его расширенная часть состоит из нескольких концентрических контуров, которые непрерывно масштабируются, и этот контур определяется заданной формой края.

Радиальные градиенты очень похожи на линейные градиенты, за исключением того, что вместо прямой линии преобразование цвета исходит наружу от центральной точки. Они часто используются для создания полупрозрачных экранов, чтобы помочь отделить смоделированное всплывающее окно от фона.

.back {
  background: radial-gradient(ellipse at center, #3053b9 0%, #5343ff 50%, #00ffff 50.25%, #00ffff 100%);
  height: 325px;
  width: 325px;
}

Эффект приведенного выше кода следующий:

Если линейный градиент — это холодный и беспощадный железный забор, то радиальный градиент — это сверкающая и теплая озерная гладь, слой за слоем озаренная светом надежды…

Поскольку параметры функции градиента очень похожи, их можно использовать с одинаковыми параметрами.repeating-radial-gradient(), следующее немного меняет параметры и использует новую функцию:

.back {
  background: repeating-radial-gradient(ellipse at center, #cc1920 0%, #00c13c 10%, #cc1920 20%, #cccc11 30%);
  height: 325px;
  width: 325px;
}

Эффект следующий:

Если этот эффект сочетается с каким-то тонкимcss animationЭффект действительно ослепительный, и ваш сайт больше не будет однообразным. (Иногда я задаюсь вопросом, смогу ли я превратить рекламу сайта в калейдоскоп, как только я захожу на сайт, кажется, что я был в иллюзии...)

конический градиент() и повторяющийся конический градиент()

Ниже представлена ​​третья функция градиента — градиент конуса. Разница между коническим градиентом и радиальным градиентом заключается в том, что цвет вращается по кругу. Поэтому он часто используется для создания круглых индикаторов выполнения, рисования некоторых круговых анимаций и т. д. Однако по сравнению с двумя вышеупомянутыми функциями совместимость конусного градиента не оптимистична, и его могут поддерживать только более новые версии различных браузеров.

Небольшой пример:

.back {
  background: conic-gradient(
     #74103c 115deg, #00c13c 136deg 180deg, #99123c 100deg);
  border-radius: 50%;
}

Следующим образом:

Наши обычные круговые диаграммы и круговые индикаторы выполнения могут быть реализованы с его помощью, что очень практично. Вот еще один «галлюцинирующий» код, в котором используются конические градиенты:

.back{
	background-image:
     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}

Может быть трудно представить себе его реальный эффект, просто взглянув на эти значения свойств, но если вы посмотрите на следующий пример изображения:

Когда автор увидел этот эффект, у него действительно защипало глаза, как будто он увидел, как солнце сияет, как солнце, вызывая головокружение. Может быть, это чувство погони за звездами...

функция цвета

В CSS есть много мест, связанных с цветом.Мы обычно используем несколько способов определения цвета:

  • Шестнадцатеричный (HEX)
  • RGB
  • HSL
  • Запишите предопределенные браузером имена цветов (черный, белый...) напрямую

У Чжан Синьсю также есть очень подробное объяснение цвета CSS Color Level 4, и я также делюсь им с вами здесь:CSS Color Level 4

Конечно, в дополнение к этим методам есть и другие функции CSS, которые мы можем использовать.Начнем с общих функций цвета:

RGB() и RGBA()

Функция rgb позволяет использовать числа для описанияrкрасный,gзеленого цвета иbсиний иalphaпрозрачность. шестнадцатеричный цвет сrgbВозможна также бесплатная конвертация.

Функция rgb также очень проста в использовании, в целомbackground: rgb(100, 200, 50)готов к использованию. В старых браузерах использование rgb означает отказ отalphaНастройка значения по умолчанию равна 1, что непрозрачно, но с продвижением версии CSS теперь новая версия функции браузера rgb также может устанавливать четвертый параметр, какalphaстоимость. Вы даже можете использовать слэш-синтаксисbackground: rgb(100, 200, 50 / 0.4).

Функция rgba очень похожа на rgb, если вас интересуют конкретные детали, вы можете проверитьопределение функции rgba с сайта w3.org.

hsl() и hsla()

Функция hsl очень похожа на функцию rgb, но больше не описывает красный, желтый и синий цвета. Вместо этого есть три параметра: цвет, насыщенность и яркость.

Но во всех этих новых синтаксисах для цветного представления,#RRGGBBAAОн самый практичный и частота использования самая высокая.Что касается некоторых других новых синтаксисов или улучшений отказоустойчивости, то это хорошо, но редко используется в повседневной разработке.

Все дороги ведут в Рим, поэтому исходная дорога хороша, поэтому нет необходимости использовать те дороги, на которых могут быть ямы.

Использование этих двух функций примерно таково:

  hsla(0, 100%, 50%, 80%)
  hsl(270 60% 50% / .15)
  hsl(270 60% 50% / 15%)
  hsl(270deg, 60%, 70%)
  hsl(4.71239rad, 60%, 70%)
  hsl(.75turn, 60%, 70%)

Видно, что синтаксис этих двух функций очень свободен. Можно использовать косые черты, проценты, углы и запятые. Поскольку они слишком распространены, они не обсуждаются подробно.

lch() и лаборатория()

Многие должны быть как я и до сих пор не понимают смысла этих двух функций, поэтому вот энциклопедия:

Лабораторный режим установлен в соответствии с международным стандартом измерения цвета, установленным Международной комиссией по освещению (CIE) в 1931 году. Цветовой режим, который был улучшен и назван в 1976 году. Цветовая модель Lab компенсирует недостатки цветовых моделей RGB и CMYK. Это аппаратно-независимая цветовая модель и цветовая модель, основанная на физиологических характеристиках. Цветовая модель Lab состоит из трех элементов: один элемент — яркость (L), а a и b — два цветовых канала. a включает цвета от темно-зеленого (низкое значение яркости) до серого (среднее значение яркости) и ярко-розового (высокое значение яркости); b — от голубого (низкое значение яркости) до серого (среднее значение яркости) и затем до желтого (высокое значение яркости значения яркости). Следовательно, это смешивание цветов приведет к цвету с ярким эффектом.

Просто другой режим определения цвета, и это аппаратно-независимые цвета.

Далее возвращаемся к этим двум функциям, они пока в состоянии разработки, поэтому информации меньше, только вcsswgНекоторые детали можно найти здесь.

CSS позволяет выражать цвета непосредственно в функциях lab и lch.

lab() = lab( <percentage> <number> <number> [ / <alpha-value> ]? )

lch() = lch( <percentage> <number> <hue> [ / <alpha-value> ]? )

Это может быть трудно понять, просто взглянув на синтаксис, давайте сначала поговорим об этомlabфункция, она может принимать 4 параметра, но четвертый параметр является необязательным.

  • Первый параметр является яркостью CIE, так как вышеупомянутая экспозиция Baidu Encyclopedia, конкретные вопросы о яркости CIE могут найти свое собственное, автор не очень понимает, не много.

  • Второй параметр — это канал цветового канала, описанный выше.

  • Третий параметр — это канал b в цветовом канале выше.

  • Четвертый параметр — это необязательное альфа-значение параметра, очень похожее на альфа-канал функции rgb.

очень похоже наlchФункция также имеет 4 параметра, четвертый параметр по-прежнему является необязательным параметром.

  • Первый параметр совпадает с первым параметром лабораторной функции, который также является яркостью CIE.

  • Второй параметр — цветность, который примерно представляет количество цвета и может принимать значения от0получать230, но если оно отрицательное, то потребуется0Да, если оно превышает 230, то на самом деле все равно будет 230 в конце, и синтаксических ошибок не будет.

  • Третий параметр очень похож на функцию hsl<hue>Оттенок, может принимать значенияколичествоилиугол.

  • Четвертый параметр такой же, как лабораторная функция, как альфа-значение.

Выше приведено определение двух функций. В настоящее время на таких веб-сайтах, как MDN, мало информации. Если вы хотите получить информацию из первых рук, обратите внимание на черновик CSS.

Эти две функции используются точно так же, как и любые другие функции цвета:

  lab(29.2345% 39.3825 20.0664);
  lab(52.2345% 40.1645 59.9971);
  lab(60.2345, -5.3654 58.956);
  lab(62.2345% -34.9638 47.7721);
  lab(67.5345% -8.6911 -41.6019);
  lch(29.2345% 44.2 27);
  lch(52.2345% 72.2 56.2);
  lch(60.2345% 59.2 95.2);
  lch(62.2345% 59.2 126.2);
  lch(67.5345% 42.5 258.2);

HWB ()

Давайте сначала разберемся, что такое функция hwb:

HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL, but often even easier for humans to work with. It describes colors with a starting hue, then a degree of whiteness and blackness to mix into that base hue.

Это еще один функциональный способ определения цветов, такой как hsl, который обычно проще в использовании, потому что вам нужно только заботиться о нужном оттенке, а затем смешивать белый или черный соответствующим образом, чтобы получить желаемый цвет.

Синтаксис следующий:

hwb() = hwb( <hue> <percentage> <percentage> [ / <alpha-value> ]? )

Если бы это был я, я бы с большей охотой попробовал этот метод, конечно, если не учитывать совместимость.

  • Его первый аргумент имеет то же представление, что и hsl.оттенокВ частности, вы можете обратиться к первому параметру функции HSL.

  • Второй параметр — это количество белого для смешивания, которое можно изменить от0%прибыть100%стоимость.

  • Третий параметр — это количество черного цвета для смешивания, которое можно изменить от0%прибыть100%стоимость.

  • Четвертый параметр по-прежнему является альфа-каналом, как и остальные функции, без пояснений.

цвет()

Цветовая функция может задавать цвета в определенном цветовом пространстве, а также эта функция создает цвета в зависимости от устройства.

Синтаксис следующий:

color() = color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ]# , <color>? )

Это относительно сложная разметка функции CSS, и простое ее использование выглядит следующим образом:

color(rec2020 0.42053 0.979780 0.00579, color(display-p3(0 1 0)));

Пространство имен цветов rec2020 используется выше для использования этого каменно-серого цвета, и цвет передней панели не может отображаться на экране display-p3, а цвет задней панели будет использоваться в качестве альтернативного цвета дисплея.

Если вы хотите узнать больше, вы можете проверить конкретные определения и детали, и вы можете сначала понять необычные.@color-profileправило.

устройство-cmyk()

Функция device-cmyk — это последняя представленная функция цвета, это функция цвета, зависящая от устройства. Эта функция может быть полезна, если вам нужно напечатать что-то, что должно зависеть от устройства, потому что фактическая распечатка имеет хроматическую аберрацию и может быть далека от ожидаемого результата.

Синтаксис следующий:

device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? ) <cmyk-component> = <number> | <percentage>

Он принимает в общей сложности 6 параметров, а именно: голубой, пурпурный, желтый и черный компоненты, при этом пятый параметр совпадает с альфа-значением предыдущих функций, а шестой параметр является необязательным параметром.

Typically, print-based applications will actually store the used colors as CMYK, and send them to the printer in that form. However, such colors do not have a colorimetric interpretation, and thus cannot be used in gradients, compositing, blending and so on. As such, Device CMYK colors must be converted to an equivalent color.

Принтеры обычно хранят цвета CMYK, но эти цвета нельзя градировать, комбинировать, смешивать и т. д. Поэтому устройство-cmyk должно быть преобразовано в приблизительный цвет.

Он также включает в себя необычные@color-profileправило. Вы можете обратиться к цвету, чтобы учиться вместе.

Суммировать

По мере того, как текст накапливался, прежде чем я научился, я думал, что содержимое, размеченное функциями CSS, было лужей мелкого песка, и я сложил его в замок из песка. Но когда я стоял на вершине замка из песка, я вдруг понял, что это не лужа песка, а бесчисленные каменные стены, запирающие здесь песок. Поэтому я продолжал карабкаться и, наконец, взобрался на каменную стену, думая, что получу истинный смысл и изучу волшебство и чудесную разметку функций CSS. Неожиданно другая сторона каменной стены оказалась круче, если вы хотите достичь вершины, вам остается только продолжать подъем. — Хуан Ван Гог

Проще говоря: я думал, что знания CSS просто трудно найти, но после того, как я начал их искать, я обнаружил, что реальная трудность заключается в том, что сама функция CSS переплетена со многими правилами, которые существуют в CSS, поэтому каждая функция может быть трудным для понимания.Характеристики, нужно читать неоднократно, проверять документ, чтобы точно понять его значение (уже есть китайские документы, которые можно легко прочитать), конечно, некоторые люди могут сказать, что я трачу эти усилия, чтобы проверить, действительно ли правила CSS, которые могут не существовать в будущем, имеют смысл.

Знания всегда нужно обобщать.Хотя CSS относительно сложен, пока структура знаний разобрана, его все же можно изучить вглубь.Есть так много больших парней, которые проложили прочную долгую дорогу, следуйте по стопам гигантов , и резюмировать CSS, которые я изучил.

Наконец, попросите поставить лайк b(￣▽￣)d!

Продолжайте обновлять оставшиеся функциональные теги CSS на этой неделе.

использованная литература

Гибкая типографика с использованием замков CSS

Блог Чжан Синьсюй

csswg.org: #funcdef-color

Функциональные теги MDN CSS

w3.org: #Functional Notations

w3plus

css-tricks

Категории