Что я узнал после просмотра годового отчета CSS за 2021 год?

Привет всем, яConardLi, ежегодныйCSS年度报告Как и планировалось, я выбрал некоторые части, которые мне интересны, и давайте посмотрим вместе со мной~

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

макет

Флексбокс (`Flex`)макет

Я считаю, что большинство людей использовали его, поэтому я не буду говорить больше.

CSS-сетка (`GRID`)макет

Все больше и больше людей используют его, только0.7%респондентов не знали об этом. Я использовал его в своей повседневной жизни, но не использую его часто. В большинстве сценариевFlexудовлетворить потребности, как насчет вас?

подсетка (`Subgrid`)макет

Люди использовали немного больше, чем в прошлом году, но никогда не использовали или не поняли, по-прежнему большинство.

Честно говоря, я не использовал его раньше, и я выучил его специально, поэтому название интересное.Помимо манипулирования сетками того же уровня, у него есть возможность манипулировать подсетками, и он может достичь большего чемGridБолее сложные макеты, такие как следующий пример:

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
  gap: 20px;
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}

Многоколоночный макет (Multi-Column)

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

Проверьте это, это довольно хорошо, я использовал его раньше для таких вещейdisplay:inline-blockИди, возьми, теперь недвижимость готова.

<div class="container">
  <h1> code秘密花园 </h1>
  <p> ConardLi </p>
  <p> 一些文本 ... </p>
</div>

.container {
  column-count: 3;
}

Например, приведенный вышеcontainerВ контейнере есть три элемента блочного уровня, что даетcontainerуточнитьcolumn-count: 3Затем вы можете позволить браузеру автоматически разделиться на три столбца и рассчитать, сколько места выделено для каждого столбца.

position: sticky

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

Логические свойства

逻辑属性, представляет собой преобразующую способность, недавно представленную CSS, ее свойства и значения могут использоваться для управления макетом с логической точки зрения, а не с физической точки зрения, ориентации или размера.

Согласно текущему опросу, немногие использовали его, поэтому давайте кратко представим его.

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

Языки в большинстве стран отформатированы слева направо, т.е.LTR(left to right), но есть еще некоторые языки, использующие письмо справа налево, т.е.RTL(right to left)версии макетов, таких как арабский и иврит.

На картинке показаны три разных способа письма на латыни, иврите и японском языке.

逻辑属性Это может не только сделать макет интерфейса более логически строгим, но и позволить разработчикам писать более совместимые страницы с меньшим количеством кода. Давайте рассмотрим простой пример:

html

    <h3>物理布局</h3>
    <div class="container" id="">
        <div class="box">code</div>
        <div class="box">秘密花园</div>
    </div>

    <h3>逻辑布局</h3>
    <div class="container" id="logic">
        <div class="box">code</div>
        <div class="box">秘密花园</div>
    </div>

css

        :root {
            --size: 100px;
        }

        .container {
            display: flex;
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #000;
            /* direction: rtl; */
        }

        .box {
            width: var(--size);
            height: var(--size);
            line-height: var(--size);
            text-align: center;
            background-color: rgb(170, 231, 71);
        }

        .container:nth-of-type(1) .box:last-child {
            margin-left: 10px;
        }

        .container:nth-of-type(2) .box:last-child {
            margin-inline-start: 10px;
        }

Когда макет страницы обычный слева направо, эффект тот же:

Теперь изменим расположение контейнеров на:direction: rtl;, мы обнаружим, что есть проблема с физической компоновкой:

В этом CSSmargin-inline-startЭто логическое свойство, позволяющее изменять поля при изменении направления компоновки, а не фиксированного направления.

В этой логике есть много атрибутов:

aspect-ratio

Используется для указания соотношения сторон изображения, примерно в обзоре37%людей использовали его.

Я упоминал об этом во многих предыдущих статьях, и это очень полезное свойство:

Лучшие практики для дизайна компонентов веб-изображений
Интерпретация новых функций в Chrome 88
Расшифровка веб-производительности нового поколения и показателей качества

Учитывая соотношение сторон изображения, браузер может автоматически рассчитать размер изображения, который можно использовать для улучшенияCLSпоказатель.

aspect-ratio: 1 / 1;

/* 全局值 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;

content-visibility

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

Я уже писал об этом статью:

Свойство CSS, которое может ускорить отображение вашей страницы в несколько раз.

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

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

content-visibility: autoВы можете указать браузеру временно пропустить макет и рендеринг элемента, пока элемент не будет прокручен до текущего окна просмотра, что может ускорить первоначальный рендеринг всей страницы и сократить время, необходимое пользователю для взаимодействия со страницей. .

Однако в настоящее время совместимость все еще относительно плохая, используйте ее с осторожностью:

Container Queries

Запрос контейнера, в настоящее время экспериментальная функция CSS, только5%людей использовали его.

Когда мы хотим написать адаптивную страницу, мы обычно пробуем медиа-запросы (@media) для разных макетов в зависимости от размера страницы.

но,@mediaОн предназначен для отображения размера всей страницы.Однако для некоторых компонентов в определенной структуре страницы (таких как карточки в структуре страницы из левого и правого столбцов), очевидно, мы хотим настроить макет только в соответствии с размером компонента, но мы должны рассматривать весь макет страницы, чтобы угадать, сколько места может занимать этот компонент при разных размерах страницы.

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

На этом этапе мы можем использовать контейнерный запрос:

@container (min-width: 400px) {
  .c-article {
    display: flex;
    flex-wrap: wrap;
  }
}
@container (min-width: 700px) {
  .c-article {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
  }

  .card__thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Впечатляющая совместимость на данный момент:

Если вы хотите попробовать, также откройте экспериментальную конфигурацию:chrome://flags/#enable-container-queries

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

Графика CSS (форма)

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

Например, у нас есть круглое изображение слева, и мы хотим изменить эффект обтекания текста справа на круг:

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

circle()- круглый
ellipse()– Эллипс
inset()- прямоугольный (включая прямоугольник со скругленными углами)
polygon()– Полигон

мы указываем его какcircle(50%), вы можете добиться кругового эффекта обтекания текста.

img {
  float: left;
  shape-outside: circle(50%);
}

object-fit

object-fit— это более часто используемое свойство CSS, которое указывает, как содержимое заменяемого элемента должно вписываться в высоту и ширину используемого блока.

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

object-fitСуществуют следующие пять значений:

fillЗаменяемое содержимое просто заполняет ширину содержимого элемента, заменяющее содержимое растягивается, чтобы заполнить все поле содержимого, и исходное соотношение не гарантируется.
containСохраняйте исходное соотношение размеров. Убедитесь, что размер замещающего содержимого может поместиться в контейнере. Поэтому этот параметр может быть пустым в контейнере.
coverСохраняйте исходное соотношение размеров. Убедитесь, что размер заменяемого содержимого должен быть больше размера контейнера, а хотя бы одна из его ширины и высоты должна совпадать с размером контейнера. Следовательно, этот параметр может сделать части содержимого замены невидимыми.
noneСохраняйте исходное соотношение размеров. При сохранении исходного размера заменяемого контента.
scale-downРазмер контента иnoneилиcontainОдин из них одинаковый, в зависимости от того, какой из них получает меньший размер объекта.

clip-path

Этот студент анимации должен использовать его чаще. Мы можем использовать его, чтобы вырезать видимую область элемента. Согласно опросу, есть все больше и больше пользователей.

clip-pathдаclipОбновленная версияclipработает только наpositionдляabsoluteа такжеfixedэлементы и область отсечения могут быть только квадратными, аclip-pathБолее мощный, вы можете вырезать элементы любой формы, и нет требований к методу позиционирования элемента.

Смесители

<blend-mode>, — это тип данных CSS, также известный как режим наложения, который можно использовать для описания того, как должны отображаться цвета, когда элементы перекрываются.

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

Проще говоря, когда накладываются две картинки разных цветов, как должна отображаться перекрывающаяся часть посередине. Давайте рассмотрим простой пример:

        body {
            text-align: center;
            color: #000;
            background-image: linear-gradient(90deg, #fff 49.9%, #000 50%);
        }
        h1 {
            font-size: 100px;
        }

С обеих сторон веб-страницы два разных цвета. Мы добавили текст в середине веб-страницы. Цвет текста совпадает с цветом веб-страницы справа, поэтому справа ничего не видно сторона:

В это время мы должны перевести смешанный режим класса:

        h1 {
            font-size: 100px;
            color: #fff;
            mix-blend-mode: difference;
        }

Можно добиться следующих эффектов:

mix-blend-mode: differenceЭто означает, что перекрывающаяся часть принимает разницу между двумя цветами, за исключениемdifference,а такжеdarken(темнее),lighten(темнее),screen(цветной фильтр) и так далее.

Эффекты CSS-фильтра

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

Картинка для понимания его основного назначения:

color-gamut

99%Ей еще никто не пользовался... Поздравляю с тем, что вы возглавили список наименее известных функций этого отчета.

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

@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}

perspective

Как следует из названия, это означает перспективу, которая позволяет нам добиться некоторых простых 3D-эффектов, но теперь мы используем чистыйCSSНапишите3DЭффекта меньше, поэтому эта функция тоже используется все реже и реже:

perspectiveПо сути, это, по сути, спецификация наблюдателя сz=0Расстояние до плоскости, чтобы элемент с трехмерным преобразованием положения имел эффект перспективы.z>03D-элементы больше, чем обычно, аz<0меньше нормального, и величина определяется значением этого свойства.

Intrinsic Sizing

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

CSSЕсть два размера в : собственный размер (intrinsic) и внешние размеры (extrinsic). элементальwidth、heightУстановленное фиксированное значение свойства относится к внешнему размеру. С другой стороны, внутренний размер определяется содержимым элемента.

Давайте посмотрим на пример мытья лица.Два тега P используют внутренний размер двух содержимого для определения собственной ширины.

        h1 {
            border: 1px solid red;
            width: min-content;
        }

        .min {
            width: min-content;
        }

        .max {
            width: max-content;
        }

min-content: ширина равна ширине самого длинного слова
min-content: ширина равна ширине всего содержимого (примерно эквивалентноdisplay:inline-block + white-space:nowrap)

В этой главе также упоминаетсяbackdrop-filter,conic-gradient(),color(),accent-color, мне это не интересно, поэтому я просто пропустил это.

взаимодействовать

Захват прокрутки CSS

Захват прокрутки CSS позволяет пользователям зафиксировать область просмотра на позиции элемента после прокрутки.Этот эффект часто появляется на некоторых официальных сайтах.

Реализованный захват прокрутки в основном зависит от двух атрибутов: элемента контейнераscroll-snap-typeатрибуты и дочерние элементыscroll-snap-alignАтрибуты.

scroll-snap-type:mandatoryСообщает браузеру, что он должен прокручивать до точки привязки, когда пользователь прекращает прокрутку.
scroll-snap-alignМожно указать, какая часть элемента привязывается к контейнеру,startОтносится к верхнему краю элемента. Если вы прокручиваете горизонтально, это относится к левому краю.centerа такжеendЗначения атрибутов совпадают.

Вот простая демонстрация:

    <div class="slider">
        <section id="s1">
            <h1>你好啊</h1>
        </section>
        <section id="s2">
            <h1>ConardLi</h1>
        </section>
        <section id="s3">
            <h1>code秘密花园</h1>
        </section>
    </div>

        .slider {
            font-family: sans-serif;
            scroll-snap-type: x mandatory;
            display: flex;
            -webkit-overflow-scrolling: touch;
            overflow-x: scroll;
        }

        section {
            border-right: 1px solid white;
            padding: 1rem;
            min-width: 100vw;
            height: 100vh;
            scroll-snap-align: start;
            text-align: center;
            position: relative;
        }

        h1 {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            color: white;
            width: 100%;
            left: 0;
            font-size: calc(1rem + 3vw);
        }

Вы можете добиться следующих эффектов:

overscroll-behavior

Управляет поведением полосы прокрутки, когда она достигает границ области прокрутки.

Например, мы помещаем окно чата робота в нижний правый угол веб-страницы.Когда мы прокручиваем сообщения чата, если мы прокручиваем вниз, другие части страницы также будут прокручиваться.В это время мы можем использоватьoverscroll-behavior-y: contain;Чтобы установить, когда текущая область прокручивается вниз, другие области не будут прокручиваться.

touch-action

touch-actionЕго можно использовать для установки области того, как пользователи сенсорного экрана манипулируют элементами (сглаживание, масштабирование, жесты панорамирования одним пальцем, панорамирование и масштабирование пальцем и т. д.), как правило, мы будем использовать его на веб-сайтах, которые адаптируются к мобильным операциям, и тенденция не большая., больше не скажешь.

pointer-events

pointer-eventsЭто старое свойство, которое можно использовать для управления событиями мыши на определенных элементах и сценах.

Например, если мы хотим отключить событие щелчка элемента, мы можем использоватьpointer-events:none, который не только отключает элементhoverэффект, но на самом деле удаленclickмероприятие.

Есть также некоторые специфические атрибуты для элементов SVG, такие какpointer-events: fill;:

scroll-timeline

scroll-timelineэто свойство, которое может более гибко управлять анимацией прокрутки, только среди интервьюируемых2.5%людей использовали его.

scroll-timelineЭто все еще относительно раннее предложение, принадлежащееScroll-Linked AnimationsЧасть спецификации:

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

@scroll-timeline scroll-in-document-timeline {
  source: auto;
  orientation: vertical;
  scroll-offsets: 0%, 100%;
}

sourceЭлемент, представляющий прокрутку, который по умолчаниюdocument
orientationОпределите направление прокрутки анимации, которое следует использовать. По умолчанию этоvertical
scroll-offsetsОписывает степень, в которой анимация должна быть активной, которая может быть относительной, абсолютной или смещением на основе элементов.

Затем мы устанавливаем имя анимации временной шкалы, объявленное выше, наanimation-timelineсвойства могут быть связаны с анимацией CSS.

#progressbar {
  animation: 1s linear forwards adjust-progressbar;
  animation-timeline: scroll-in-document-timeline;
}

набор текста

font-variant

font-variantНа самом деле он представляет собой набор свойств CSS, управляющих шрифтами.Согласно опросу, их использует все меньше и меньше людей...

Мы обычно используем больше всего в разработке, вероятно,font-variant:small-caps;Да, он может преобразовать все строчные буквы в прописные.

На самом деле, кромеfont-variant-caps, который также включает следующие подсвойства:

font-variant-numeric: управление формой отображения чисел
font-variant-alternates: контролировать использование альтернативных шрифтов
font-variant-ligatures: управляет отображением лигатур.

initial-letter

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

line-clamp

line-clampЕго можно использовать для ограничения количества строк содержимого, отображаемого в контейнере блочного уровня, который следует использовать чаще.

Например, мы хотим ограничить отображение до двух строк текста в контейнере и заменить содержимое с более чем двумя строками многоточием:

        .box {
            width: 300px;
            height: 100px;
            border: 1px solid red
        }

        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
        }

Variable fonts

Переменные шрифты (Variable Fonts), участвуя в опросе впервые в этом году, наверное20%людей использовали его.

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

Кроме того, мы можем использоватьVariable FontsОбеспечьте более богатые, гибкие и детализированные возможности пользовательских шрифтов для веб-сайтов (например,font-weight:550Это относится к мелкозернистому управлению шрифтом), чтобы адаптироваться к изменениям в разных стилях и темах.

Другие преимущества

Переменные CSS (настраиваемые свойства)

CSS-переменные, скорость использования достигла84%, Только слышал2.8%.

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

:root {
    --bg-color: red;
}
.title {
    background-color: var(--bg-color);
}
.desc {
    background-color: var(--bg-color);
}

Запросы на поддержку функций

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

Использование широко, такое как следующее:

Проверьте, поддерживается ли указанное свойство CSS.

@supports (animation-name: test) {
    @keyframes { 
      …
    }
}

Определяет, не поддерживается ли указанное свойство CSS

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 这里的CSS代码用来模拟text-align-last:justify */
}

Проверьте, поддерживается ли пользовательское свойство

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

Проверяет, поддерживает ли браузер селектор


@supports not selector(:is(a, b)) {
  /* 不支持 :is() 时的备选方案 */
  ul > li,
  ol > li {
    … /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */
  }
}

Однако, как функция, используемая для тестирования совместимости, она фактическиIEВстань на колени, все, что я могу сказатьIEПотрясающий!

Ограничения CSS (сдерживание)

CSS containАтрибуты позволяют разработчикам объявить текущий элемент и его содержимое как можно более независимыми от остальной части дерева DOM.Это инструмент оптимизации производительности, и их не более10%людей использовали его.

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

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

noneбез
layoutВключить ограничения макета
styleВключить ограничения стиля
paintВключить лимит рендеринга
sizeВключить ограничение размера
contentВключить все ограничения, кроме размера
strictВключить компоновку, стиль и комбинацию трех ограничений

Для некоторых независимых виджетов на странице рекомендуется использоватьcontain: strict;, это очень полезно для производительности страницы, текущее использование все еще относительно низкое, настоятельно рекомендуется!

will-change

will-changeЭто также атрибут, используемый для оптимизации производительности по сравнению с указанным выше.contain, его использование выше.

Когда мы запускаем страницу, чтобы отрисовать большую область с помощью какого-либо поведения (щелчка, перемещения или прокрутки), браузер часто оказывается неподготовленным и может использоваться только пассивно.CPUПросчитывать и перерисовывать, т.к. нет подготовки заранее, с рендерингом справиться сложно, поэтому кадр сбрасывается.

will-changeВы можете сообщить браузеру, какие изменения мы хотим внести до того, как поведение сработает, чтобы браузер был готов к запуску.GPUСделайте анимацию для вас.

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

комбинироватьJavaScriptиспользовать:

var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

В CSS используйте:

.will-change {
	transition: transform 0.3s;
}
.will-change:hover {
	will-change: transform;
}
.will-change:active {
	transform: scale(1.5);
}

При правильном использовании это также отличный инструмент для оптимизации производительности.

calc()

Вычисленные свойства, скорость использования достигла93%, я считаю, что большинство студентов использовали его.

Нечего сказать, он очень часто используется в верстке и анимации, например,height: calc(100vh - 80px);.

Houdini

Houdiniочень мощная способность, которую можно расширитьCSSКроссбраузерность рендеринга дерева только3%.

Houdiniпройти черезTyped Object ModelВключить больше семантикиCSS. Разработчики могут определять расширенные функции с синтаксисом, значениями по умолчанию и наследованием через API свойств и значений.CSSпользовательские свойства.

Я уже писал об этом статьюHoudini, если вам интересно, см.

Расширьте возможности кросс-браузерного рисования CSS с помощью Houdini.

Функции сравнения CSS (функции сравнения)

CSSсерединаmin，maxФункции — это все функции сравнения, и их функции аналогичныjsв функцииmin，max, используемый для получения минимального или максимального значения нескольких атрибутов, разделенных запятыми, например (width: min(100px,200px,300px);)

предварительная обработка

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

Sass/Scss:sassразделен наsassа такжеscssдве грамматические ветви,scssОн совместим с CSS, с ним легко начать работу, и он наследуетsassПреимущества использования большего количестваscss,sassСинтаксис заключается в использовании отступа вместо фигурных скобок и опускании точки с запятой в конце.sassБыстрее и проще установить, потому чтоscssСовместим с методом написания css, его легче писать, напримерbootstrap,ElementТакже используется scss в качестве препроцессора css.
Less: Ежедневное развитиеLessа такжеScssПочти все они неравнодушны к нативной грамматике, которую легче принять.lessОдним из преимуществ является то, что вы можете «не нужно компилировать», зачем добавлять кавычки, потому что его действительно можно скомпилировать без ручного управления.lessимпортировано послеless.jsДа, но рекомендуется всегда компилировать его, потому что в большинстве случаев компиляция не займет у вас много времени.
stylusУсыновленныйsassАналогичный отступ используется для обозначения уровней, опущены точки с запятой и т. д., а для объявления переменных больше не требуются символы $ или @, имя переменной и значение переменной разделяются символом =, и в то же времяstylusпозволить традициюcssграмматика иstylusСинтаксическая смесь. Поскольку он намного компактнее, объем кода может быть меньше, но его может быть не так приятно читать.
PostCSSИнструмент, использующий JS-плагины для преобразования стилей. На самом деле он отличается от позиционирования препроцессоров CSS. Его основные функции:lint css,служба поддержкиCSS NextСинтаксис, автоматическое добавление префиксов и других функций, через плагины, вы можете в основном покрыть функции препроцессоров CSS, и в то же время вы можете добиться многих функций, которые препроцессоры не могут. Преимущество заключается в его богатой экологии плагинов, которая может охватывать все аспекты разработки, и мы можем легко разрабатывать свои собственные плагины.

удовлетворение

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

Применение

SassИспользование все еще первое,PostCSSобогнатьLess.

Опыт со временем

Это интереснее,Less、Sassудовлетворенность снижается с течением времени, в то время какPostCSSпостепенно повышается.

степень позитива и негатива

CSS-фреймворк

Фреймворк не будет представлен слишком много, и те, кто его использовал, в основном знают его.

удовлетворение

Изюминка здесьAnt Design, Удовлетворение увеличивается с каждым годом, свет отечественной продукции!

Применение

не ожидалBootstrapДо сих пор может занимать первое место.Я сдался 5 лет назад.К тому же иностранцы им больше пользуются.Tailwind CSSтемпы роста очень быстрые,Ant DesignМы по-прежнему используем больше, общее использование только16%.

CSS-in-JS

я также используюCSS-in-JS, первое, что решает проблему именования, традиционноеcssсхема, потому чтоclass nameОн глобальный, вы должны обеспечить его уникальность, вы должны указать имя вашего компонента и другие различныеnamespaceтак какclass nameпрефикс для обеспечения уникальности,css in jsтолько что решил это. Кроме того, используйтеCSS-in-JSИспользование js для динамического управления стилями было бы проще.

удовлетворение

наиболееCSS-in-JSУдовлетворенность фреймворком упала...

Это также относительно нормально, потому что его недостатки также относительно очевидны и не решены:

Потребление времени выполнения: лучше, чем у большинстваCSS-in-JSВсе библиотеки динамически генерируют CSS, обычно производительность снижается, а размер пакета немного больше.
Плохая читаемость кода: большинствоCSS-in-JSРеализация позволит достичь эффекта локальной области действия CSS за счет создания уникальных селекторов CSS, и эти автоматически сгенерированные селекторы могут значительно снизить читабельность кода.
Нет единого отраслевого стандартаCSS-in-JSЭто просто техническая идея без стандарта и спецификации, которой единообразно следует сообщество, поэтому синтаксис и функции разных реализаций могут сильно различаться.

Применение

Это не меняется,Styled Componentsиспользование является самым высоким.

пройти черезStyled Components,вы можете использоватьES6Требуется синтаксис строки шаблона тега.styledизComponentопределить сериюCSSАтрибут, когда код JS компонента анализируется и выполняется,Styled Componentsбудет динамически генерироватьCSSселектор и поставить соответствующийCSSпропуск стиляstyleВставьте этикетку в видеheadвнутри этикетки. динамически генерируемыйCSSСелектор будет иметь небольшое хеш-значение, чтобы обеспечить глобальную уникальность и избежать конфликтов стилей.

я лично используюEmotion CSS, это иStyled ComponentsВ принципе то же самое, но это правильноsourcemapподдержка была бы лучше.

import { css, jsx } from '@emotion/react'

const color = 'darkgreen'

render(
  <div
    css={css`
      background-color: hotpink;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hello ConardLi
  </div>
)

CSS-in-JS Playgroundэто быстрый способ попробовать разныеCSS-in-JSРеализованный веб-сайт, если вы хотите сделать технический отбор, вы можете перейти, чтобы увидеть:

Главный приз

Наиболее используемые функции:CSS 比较函数, рост по сравнению с прошлым годом15.5％.
Высшее удовлетворение:PostCSSСнова возглавил список с 91% удовлетворенностью.
Самые просматриваемые:CSS Modulesснова с74%Пропорции представляют наибольший интерес для разработчиков CSS.

Объем расследования

Наконец, давайте поговорим о масштабах расследования этого отчета, так как многие разработчики в Китае на самом деле только исследуют.75лиц, с учетом всех респондентов0.9%, Плохой отзыв!

наконец

В этой статье приведены лишь некоторые выдержки из интересующего меня содержания отчета, а не полный текст отчета. Для получения дополнительной информации, пожалуйста, проверьте исходный отчет:https://2021.stateofcss.com/

Интерфейсу Douyin срочно нужны таланты. Если вы хотите присоединиться к нам, добавьте меня в WeChat и свяжитесь со мной. Кроме того, если вы хотите присоединиться к группе высококачественного внешнего общения или у вас есть какие-либо другие вещи, которые вы хотите обсудить со мной, вы также можете добавить мой личный WeChat ConardLi.

Если в статье есть какие-либо ошибки, пожалуйста, оставьте сообщение со мной в области комментариев.Если эта статья поможет вам, пожалуйста, поставьте лайк и подпишитесь. Ваши лайки и внимание - лучшая поддержка для меня!

макет

Флексбокс (Flex)макет

CSS-сетка (GRID)макет

подсетка (Subgrid)макет

Многоколоночный макет (Multi-Column)

position: sticky

Логические свойства

aspect-ratio

content-visibility

Container Queries

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

Графика CSS (форма)

object-fit

clip-path

Смесители

Эффекты CSS-фильтра

color-gamut

perspective

Intrinsic Sizing

взаимодействовать

Захват прокрутки CSS

overscroll-behavior

touch-action

pointer-events

scroll-timeline

набор текста

font-variant

initial-letter

line-clamp

Variable fonts

Другие преимущества

Переменные CSS (настраиваемые свойства)

Запросы на поддержку функций

Ограничения CSS (сдерживание)

will-change

calc()

Houdini

Функции сравнения CSS (функции сравнения)

предварительная обработка

удовлетворение

Применение

Опыт со временем

степень позитива и негатива

CSS-фреймворк

удовлетворение

Применение

CSS-in-JS

удовлетворение

Применение

Главный приз

Объем расследования

наконец

Флексбокс (`Flex`)макет

CSS-сетка (`GRID`)макет

подсетка (`Subgrid`)макет