КСС в 2022 году

внешний интерфейс CSS
КСС в 2022 году

Новый год вот-вот начнется! Доработка статьи началась!

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

Некоторые основные браузеры (Chrome, Firefox, Safari и Edge) также сосредоточены на устранении проблем совместимости браузеров, чтобы облегчить жизнь веб-разработчикам.

Исправления совместимости браузера, вWeb.devОпубликовано в 2021 г.в середине годаа такжеконец годаОтчет, хотя и простой, мы видим, что производители браузеров пытаются сгладить совместимость функций CSS в браузерах. За это мы должны поблагодарить их за их усилия!

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

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

Обзор разработки CSS за последние два года

@BramusВ твите два дня назад он составил список CSS, которые появятся в браузерах в 2022 году:

Для ознакомления с перечисленными в списке CSS вы можете прочитать его статью: "CSS In 2022》

Функции CSS, перечисленные в этом списке, и@Adam ArgyleСоответственно2020Год2021Список новых функций CSS, представленных в 2019 году, аналогичен, разница в том, чтоВ 2021 году некоторые функции CSS стали поддерживаться браузерами, а некоторые вошли в список экспериментальных свойств браузеров, возможно, в 2022 году вы сможете увидеть!

Что касается новых функций CSS, которыми поделился @Adam Argyle в 2020 и 2021 годах, я также составил список. Список в чем-то похож, но содержание все же отличается. В основном он охватывает некоторые мои собственные знания и попытки в CSS, которые записано в "Что нового в CSS в 2020 году"а также"Возможности CSS, о которых вы могли не знать в 2021 году"так же как"Стили для Интернета следующего поколения》

Конечно, если вы также являетесь ярым поклонником CSS и постоянно уделяете внимание развитию CSS и продвигаете его, то, возможно, вы уже знаете, что с 2019 года в конце каждого выпуска будет отчет о состоянии разработки CSS. год (2019,2020а также2021) представлена ​​вам. В отчете за каждый год мы можем увидеть статистику о «возможностях CSS, которые ожидают разработчики»:

Когда вышел первый отчет, я намеренно потратил немного времени, чтобы разобраться в отчете по CSS: "Использование функций CSS из отчета о состоянии 9102 CSS, и мне посчастливилось пообщаться с некоторыми студентами колледжа в конце 2020 года на тему состояния и обучения CSS! Если вам интересна эта тема, вы можете прочитатьСтатус CSS и как научиться", статья сопровождается видео, записанным при расшаривании!

Кроме того, за последние два года рабочая группа W3C по CSS выпустила ключевые отчеты по спецификациям CSS.2020год и2021Год. Обратите внимание, что отчеты W3C Highlights по спецификациям CSS выходят не каждый год!

Далее я буду следить за @Bramus'"CSS In 2022«Контур будет доработан, и в него будут добавлены некоторые мои собственные знания и мнения в этой области.

image.png

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

Популярные функции CSS

Функции CSS, упомянутые в этом разделе, — это те, которых веб-разработчики ждали в последние годы (или, скорее,Отсутствующие функции в CSS). Эти функции будут поддерживаться основными браузерами где-то в 2022 году. К счастью, некоторые функции уже поддерживаются в одном или нескольких основных браузерах, а другие со временем появятся. В 2022 году изучите или поймите эти функции CSS, и я думаю, вы пожнете плоды!

Интересно, что CSSWG поддерживает неполный список неправильностей в дизайне CSS.Заинтересован на клик здесь, чтобы прочитать!

Запрос контейнера CSS

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

Хотя контейнерные запросы CSS существуют вCSS Containment ModuleВ течение нескольких лет он не поддерживался браузерами. К счастью, в 2021 году эта функция быстро развивалась, и сегодня функцию запроса контейнера CSS можно увидеть в основных браузерах. Все это неотделимо@TerribleMia, именно она принесла нам такую ​​замечательную функцию CSS и продолжает развивать ее. ​

В дополнение к разработке функции запроса контейнера CSS, @TerribleMia также разработал две другие очень хорошие функции CSS, то есть@layerа также@scopedдва@(В правиле) правило. Для получения подробной информации, пожалуйста, прочитайте "Miriam's CSS Sandbox".

Запрос контейнера CSS@containerМедиа-запросы чем-то похожи на CSS@media, за исключением того, что он будет основан на размерах родительского контейнера элемента (или предка) (size) или стиль (style), чтобы настроить правила стиля для себя или своих потомков. Без запросов контейнеров CSS веб-разработчики в основном полагаются на медиа-запросы, чтобы настроить пользовательский интерфейс под разные контейнеры. То есть с этой функцией нет необходимости настраивать пользовательский интерфейс, полагаясь на размер окна и добавляя имя класса:

Изображение выше демонстрирует дизайн на основе окна просмотра и дизайн на основе размера контейнера. Можно сказать, что появление запроса контейнера CSS, помимо изменения метода разработки веб-разработчиков, также совершит революцию в веб-дизайне. Этим аргументом поделилась @Una Kravets на конференции GDS 2021 в "The New Responsive: Web design in a component-driven world"тема(Видео на эту тему можно найти на YouTube) отмечает следующее:

Запросы CSS-контейнеров станут одной из важнейших функций адаптивного веб-дизайна следующего поколения.

С помощью CSS после запросов контейнера мы можем настроить их пользовательский интерфейс в разных размерах на основе одних и тех же компонентов, таких как эффект окна поиска в верхней части нашего приложения Amoy:

Нажмите, чтобы просмотреть видео

Ключевой код для вышеуказанного эффекта выглядит следующим образом:

.form__container {
    container: inline-size;
}

.form {
    display: grid;
    align-items: center;
}

@container (min-width: 480px) {
    .form {
        grid-template-columns: min-content 1fr 200px;
        grid-template-areas: "searchIcon searchInput button";
        grid-template-rows: 88px;
        gap: 10px;
    }
}

@container (min-width: 768px) {
    .form {
        grid-template-columns: min-content 1fr min-content 200px;
        grid-template-areas: "searchIcon searchInput cameraIcon button";
        grid-template-rows: 88px;
        gap: 10px;
    }
}

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

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

Функция CSS Container Query — это, безусловно, долгожданная функция, и в 2022 году она будет запущена на полную мощность!

оЗапрос контейнера CSSДля более подробного ознакомления вы можете прочитать следующие статьи:

Родительский селектор CSS:has()

Селекторы CSSЭто самые базовые знания в CSS и важная часть, если вы плохо освоите селекторы CSS, то у вас будет это в мире CSS».Я искал ее тысячи раз в толпе, и когда я оглянулся, мужчина был в тусклом свете.«Ощущение! Именно по этой причине итерация модуля селектора CSS проходит очень быстро, и теперь он вошелВерсия 4 уровня.

В версии уровня 4 было добавлено несколько селекторов псевдоклассов, таких как:is(),:where(),:not()а также:has()и т. д., в то время как:has()Селектор тоже тот, которого мы ждали долгое время. @SaraSoueidan процитировала @Jen Simmons в Твиттере:

:has()Селектор — это, по сути, долгожданный родительский селектор в CSS!

CSS:has()селектор псевдокласса и:not()Несколько похожие, также известные как структурные селекторы псевдоклассов, также известные как динамические функции псевдокласса в функциях CSS. Это позволяет более точно сопоставлять элементы:

:has()Псевдокласс представляет собой элемент, если любой селектор, переданный в качестве аргумента, соответствует хотя бы одному элементу!

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

figure img { 
    aspect-ratio: 21 / 9; 
    border: 5px solid #3f51b5; 
}

figure:has(figcaption) img { 
    border: 5px solid #9c27b0; 
}

в примере вышеfigure imgСелектор должен быть понятен всем, указывая на то, что он выбран<figure>все элементы<img>элемент; иfigure:has(figcaption) imgСелектор указывает, что он выбран и содержит<figcaption>элементаль<figure>все элементы<img>элемент. Обратите внимание, что здесь:has()прошелfigcaptionселектор в качестве аргумента.

<!-- 未匹配，因为 figure 没有包含 figcaption 元素 -->
<figure>
    <img alt="" src="" />
</figure>

<!-- 会匹配，因为 figure 包含了 figcaption 元素 -->
<figure>
    <figcaption></figcaption>
    <img alt="" src="" />
</figure>

Вот что вы увидите в поддерживаемом браузере:

Обратите внимание, что Safari TP 137 в настоящее время является единственным, поддерживаемым по умолчанию.:has()Браузер селектора.

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

В приведенном выше примере, когда вы<input type="email">Когда введенное значение допустимо, форма имеет разные эффекты пользовательского интерфейса в разных состояниях:

не очень интересно. Если CSS:has()Если вас интересуют селекторы, вы также можете прочитатьСелекторы CSS:is()а также:where()а также:has()Какова функция" статья.

Подробнее о селекторах:

@layerКаскадные слои для управления CSS

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

Например следующий пример:

/* 预设级联层的顺序，并且相邻级联层之间有逗号分隔 */ 
@layer setting, tool, generic, element, object, component, utilities;

@layer setting { 
    /* 附加到级联层 setting 中的 CSS */ 
} 

@layer tool { 
    /* 附加到级联层 tool 中的 CSS */ 
} 

@layer generic { 
    /* 附加到级联层 generic 中的 CSS */ 
} 

@layer element { 
    /* 附加到级联层 element 中的 CSS */ 
} 

@layer object { 
    /* 附加到级联层 object 中的 CSS */ 
} 

@layer component { 
    /* 附加到级联层 component 中的 CSS */ 
} 

@layer utilities { 
    /* 附加到级联层 utilities 中的 CSS */ 
}

Вышесказанное просто демонстрирует@layerОсновное использование правила, и с@layerСуществует много соответствующих знаний и деталей, поэтому я не буду здесь вдаваться в подробности. Если вам интересна эта функция, вы можете прочитатьПервый взгляд на каскадные слои CSS (@layer)" статья.

Пока что вы можете проверить это в Chromium 99, Firefox 97 и Safari TP 133. Обратите внимание, что Safari был первым браузером, поддерживающим эту функцию.

Дополнительные темы о каскадировании в CSS вы также можете прочитать:

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

существуетCSS Color Module Level 5Для обработки цвета были добавлены две новые функции, а именноcolor-mix()а такжеcolor-contrast(), в дополнение к расширению предыдущегофункция цвета(Напримерrgb(),hsl(),hwb(),lab()а такжеlch()д.), вы можете изменить значение одного или нескольких параметров на основе цвета, чтобы получить новый цвет.

такой как тот, что вышеhsl()функция, мы можем базировать--theme-primaryцвет (при условии, что его значение равноhsl(274, 61%, 50%)) изменить его насыщенность (от50%приспособиться к30%), чтобы получить новый цветhsl(274, 61%, 30%). Эта функция позволяет нам легко управлять палитрой цветов бренда в CSS:

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

добавленcolor-mix()а такжеcolor-contrast()Функции относительно более сложные. вcolor-mix()Функция чем-то похожа на цветовую палитру дизайнера:Позволяет смешивать два цвета в заданном цветовом пространстве.

Например:

:root {
    --theme-color: #ff0000;
}

.text-primary-dark {
    color: color-mix(var(--theme-primary), black 10%);
}

.text-primary-darker {
    color: color-mix(var(--theme-primary), black 20%);
}

color-contrast()Функции интересные, особенно при построениисеть специальных возможностейособенно полезно, когда . Потому что это помогает нам улучшить наши возможности с точки зрения веб-доступности (лучшеУправляет контрастностью цвета текста и фона.). Его основная роль заключается в том, чтобы взять значение цвета и сравнить его со списком других цветов, выбрав из списка наиболее контрастный.

Напримерcolor-contrast(white vs red, white, green)соответственно займетred,whiteа такжеgreenа такжеwhiteсравнить, сgreenа такжеwhiteКонтраст самый высокий и в конечном итоге займетgreenцвет:

Вы также можете использовать так:color-contrast(wheat vs tan, sienna, #d2691e to AA-large). Так и будетwheatа такжеtan,siennaа также#d2691eсравнение и, наконец,siennaЦвет выигрывает, потому что он соответствуетwheatЦветовой контраст это4.273,превышенAA-largeпороговое значение.

Safari TP 124 имеетhwb(),lch(),lab(),color-mix()а такжеcolor-contrast()Установить как функцию по умолчанию!

В дополнениеhwb(),lch()а такжеlab()выраженное цветовое пространство иrgb()Отличия все же есть, они могут более деликатно передать цвет. просто возьмиhwb()С точки зрения функции:

на основе того же оттенка0degОписанный цвет:

Для получения дополнительной информации о цветах CSS вы можете прочитать:

оконный блок

"оконный блок"Это не должно быть незнакомым для всех, особенно для студентов, которые разрабатывают мобильные терминалы. потому чтоТекущее основное решение по адаптации для мобильных терминаловОдним из них является использование оконных блоков для решения. А вот оконный блок, который знают многие школьники, должен быть толькоvw,vh,vminа такжеvmax:

Оконный блок дает большие преимущества при адаптации разработки мобильных терминалов, но я думаю, что при использовании оконного блока вы также должны столкнуться с проблемой совместимости Safari на iOS. потому что,Safari на iOS имеет давнюю, крайне раздражающую ошибку, нельзя сочетать сvhБлок подходит хорошо. Если вы установите высоту контейнера на100vh, приведет к тому, что элемент будет слишком высоким (появятся полосы прокрутки). Основная причина этого в том, что Safari на мобильных устройствах вычисляет100vhигнорируя части своего пользовательского интерфейса.

Если вы используете Safari для iOS100vhЕсли вас интересуют связанные проблемы и решения, вы также можете прочитать:

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

body {
    height: 100vh;
}

@supports (-webkit-touch-callout: none) {
    body {
        height: -webkit-fill-available;
    }
}

Хотя приведенный выше код может решить100vhПроблема вызвана iOS Safari, но ведь можно сказать, что это только хак-метод (на самом деле в CSS много черной магии, это тоже не главное, о чем здесь тоже говорить).

К счастью,Модуль CSS Values ​​and Units Level 4 добавляет несколько новых единиц измерения, связанных с окнами просмотра.:

  • svh/svw: Маленькая высота окна (height),ширина(width)из1%
  • lvh/lvw: Большая высота окна (height),ширина(width)из1%
  • dvh/dwv: высота динамического окна просмотра (height),ширина(width)из1%

В CSS также есть соответствующие единицы для логических свойств, напримерsvi/svb. Для более подробного ознакомления с этими новыми оконными блоками прочитайте @Bramus' "The large, Small, and Dynamic Viewports" статья и @Arek Nawo's "Investigating the new CSS viewport relative units" статья.

Так как мы говорилиЕдиницы CSS, то было бы интересно уделить немного больше места и поговорить с вами о нескольких новых модулях CSS. во-первыхCSS Values and Units Module Level 4 добавленlhа такжеrlhБар.

Просто вспомните еще пару единиц измерения в CSS:emа такжеrem. Студенты, которые немного знакомы с CSS, знают:

  • emотносится к самому элементуfont-sizeвычисление значения (кроме собственногоfont-sizeстоимостьem, собственный элементfont-sizeЕдиницей стоимости являетсяem, относительно своего родительского элементаfont-sizeрасчет стоимости)
  • remотносится к корневому элементу HTML-документаfont-sizeРасчет стоимости, корневой элемент документа обычно относится к<html>элемент

Эти два новыхlhа такжеrlhа такжеemа такжеremочень похожи, но они относительныеline-heightРассчитать стоимость:

  • lhотносительно собственного элементаline-heightрассчитать
  • rlhотносительно корневого элемента документа (<html>)изline-heightрассчитать

Вы спросите, какая польза от такого агрегата? Я думаю, когда вы восстанавливаете черновик дизайна пользовательского интерфейса, вы, должно быть, сталкивались с разными шрифтами иline-heightЗначения разные, так что элементы всегда будут выглядеть визуально смещенными. Ну, естьlhа такжеrlhПосле этого дела пойдут немного лучше. Например, следующая сцена:

Маркировка, такая как предыдущее изображение, часто устанавливает широкий высокий1em, то теперь вы можете установить1lh:

::marker {
    width: 1lh;
    height: 1lh;
}

Пока толькоSafari TP 105утверждают, что поддерживают эти две относительные единицыlhа такжеrlh.

Вышеупомянутая функция запроса контейнера CSS всегда была функцией, которую с нетерпением ждали веб-дизайнеры и разработчики, и она быстро развивается в 2021 году. Кроме того, наряду с функцией запроса контейнера CSS, «*Единица запроса контейнера«Это также очень важно и полезно. Но,Модуль запроса контейнера CSS расположен вместе с модулем запроса контейнера CSS., не включенный в другие блоки CSS.

Блок запроса контейнера CSS чем-то похож на блок просмотра, разница в следующем:Единицы просмотра рассчитываются относительно размера окна браузера, а единицы запроса контейнера рассчитываются относительно контейнера запроса.. Таблицы стилей, использующие единицы длины запроса контейнера, упрощают перемещение компонента из одного контейнера запроса в другой. Основными единицами контейнерного запроса CSS являются:

  • cqw: равно ширине контейнера запроса (width)из1%
  • cqh: равно высоте контейнера запроса (height)из1%
  • cqi: равно встроенному размеру контейнера запроса (inline-size)из1%
  • cqb: равно размеру блока контейнера запроса (block-size)из1%
  • cqminдаcqiилиcqbМеньший (который также может бытьcqwилиcqhменьший)
  • cqmaxдаcqiилиcqbбольший изcqwилиcqhболее крупный)

Модуль, определенный раньше, чем его контейнерный запрос,c*(Например,cw,ch,cminа такжеcmax) и т. д., но некоторые из этих единиц будутchЕдиницы конфликтуют, поэтому последняя единица запроса контейнераcq*начал. То есть те, что перечислены выше!

так какПоделился @Miriam Suzanne (которая первоначально предложила это, а также является редактором спецификации), эти единицы CSS являются частью экспериментальной поддержки контейнерных запросов в Chromium.

Еще интереснее, @Ahmad Shadeed в своей статье "CSS Container Query Units" в статьеqw,qh,qminа такжеqmaxи соответствующие им логические атрибутивные единицыqi,qb.

@Ahmad Shadeed использует эти новые единицы CSS вfont-sizeначальство. Куча кода CSS, который можно использовать для контейнерных запросов,существуетclamp()функция сравненияиспользуется вcqwблок на замену.

Поведение при прокрутке:overscroll-behavior

Говорите с вами об изменениях уже в 2018 годуопыт прокруткивведено, когдаoverscroll-behaviorАтрибуты, мы можем переопределить это свойствоoverscrollПоведение контейнера по умолчанию (это означает, что содержимое шире или выше, чем ширина или высота контейнера, появляются полосы прокрутки). Возьмем конкретный пример. Например, когда мы создаем поле с маркерами, полоса прокрутки появится, когда содержимое поля с маркерами слишком велико. В это время появятся две полосы прокрутки, одна для поля с маркерами, а другая для пулевой коробки.body, его поведение по умолчанию будет похоже на следующий эффект записи экрана:

Нажмите здесь, чтобы просмотреть видеоэффекты

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

Нажмите здесь, чтобы просмотреть видеоэффект

Чтобы добиться эффекта приведенного выше видео, нам нужно использоватьoverscroll-behaviorсвойство и установите его значение равнымcontain :

.modal {
    overscroll-behavior-y: contain;
    overflow-y: auto;
}

Эта функция поддерживается начиная с Firefox 36 и Chrome 63, но Safari еще не поддерживается, но Safari догоняет.

оoverscroll-behaviorДля связанного введения вы можете прочитать @Ahmad Shadeed's "Prevent Scroll Chaining With Overscroll Behavior" статья.

Улучшить прокрутку в CSS, за исключениемoverscroll-behaviorВ дополнение к свойствам есть и другие свойства, такие как захват прокруткиscroll-snap(свойство в модуле Scroll Snap),pull-to-refreshЖдать.

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

9 декабря 2021 года W3C опубликовалCSS Scrollbars Styling Module Level 1спецификация, которая обеспечиваетscrollbar-colorа такжеscrollbar-widthДва свойства для стиля полосы прокрутки. Позже мы будем использовать их для простой настройки стилей полосы прокрутки:

.section {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

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

Раньше не было, а сейчас есть.CSS Overflow Module Level 4 добавилscrollbar-gutterАтрибут. С помощью этого атрибута разработчики могут лучше управлять полосой прокрутки или устранять разницу в макете, вызванную разными типами полос прокрутки. На рисунке ниже показаноscrollbar-gutterЭффект при разных значениях:

Если вы также заинтересованы в украшении полосы прокруткиscrollbar-gutterЕсли вас интересуют сопутствующие знания, вы можете прочитать:

CSS-сеткаsubgrid

Сразувеб-макет, несмотря на то чтоFlexboxОтлично, но Flexbox все еще очень ограничен в 2D макетах. Во всей технической системе веб-верстки толькоCSS Gridявляется единственным двумерным макетом.

Макеты CSS Grd развивались годами и поддерживались основными браузерами. CSS Grid может двигаться вперед так быстро, что в дополнение к благодарности команде разработчиков производителя браузера, я лично думаю, что я также должен поблагодарить@Jen Simmonsа также@Rachel Andrew.

@Jen Simmonsа также@Rachel AndrewПомимо того, что она является создателем спецификации CSS Grid и проповедником CSS Grid, она усердно работает в сообществе, чтобы продвигать Grid вперед.

CSS Grid существует уже много лет, и многие функции этого модуля поддерживаются в основных браузерах. В 2021 году я потратил почти полгода на систематическое изучение технологии CSS Grid и составил более 20 серий руководств по CSS Grid.В этой серии, помимо теоретических знаний о CSS Grid, есть и некоторые практические случаи. Если вас это интересует, вы можетеНельзя пропустить CSS Grid Layouts в 2022 году» индекс в статье.

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

В системе компоновки сетки CSS должна быть подсетка, а именноsubgrid

С этой целью наиболее ранние определенныеsubgridкартинаgridа такжеinline-gridто же самое, простоdisplayЗначение свойства:

.subgrid {
    display: subgrid;
}

Но не так много лет назад,subgridтолько что изdisplayимущество удалено. Используйте вложенные сетки для имитации подсеток:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.grid__item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

Просто используйте снова для элементов сетки, которые требуют вложенных сеток.display: gridтак же какgridСвязанные свойства переопределяют сетку. Однако и у этого метода есть проблемы:Сложность выравнивания вложенных элементов сетки с родительской сеткой. Другими словами, родительская сетка и вложенная сетка — это две отдельные сетки со своими отдельными параметрами сетки.

Чтобы субсидия могла продолжать соответствующие параметры родительской сети,subgridСнова введен в систему CSS Grid, но,subgridБольше неdisplayзначение, но свойство сеткиgrid-template-columnsилиgrid-template-rowsСтоимость имущества.

.grid__container { 
    display: grid; 
    grid-template-columns: 1fr 2fr 3fr 2fr 1fr; 
    grid-template-rows: 1fr 2fr 2fr 1fr; gap: 1rem; 
} 

.grid__container--subgrid { 
    grid-column: 2 / 5; 
    grid-row: 2 / 4; 
} 

.grid__container--subgrid { 
    display: inherit; 
    grid-template-columns: subgrid; 
    grid-template-rows: subgrid; 
}

Как показано на изображении выше, этоsubgridРоль: по установкеgrid-template-columnsилиgrid-template-rowsдляsubgrid, он будет выровнен с родительской сеткой. Настоящий дочерний меш может использовать соответствующие параметры родительского меша. Проще говоря, используя эту функцию, можно легко реализовать макет карты, подобный приведенному ниже:

Некоторое время было другое предложение, и это должно было использоватьdisplay: contentsзаменитьsubgrid. И на сегодняшний день в системах компоновки сетки вложенные сетки, вложенные сетки иdisplay: contentsВсе смоделированные подсетки существуют одновременно. Все они имеют свои особенности. Я не буду тратить слишком много времени на объяснение этого здесь.

subgridСтал неотъемлемой частью модулей CSS Grid и до сегодняшнего дня (последний день 2012 г.) поддерживается только браузером Firefox. Тем не менее, Chrome вступил в стадию WIP, я думаю, что в первой половине 2022 года вы сможете испытать браузер Chrome.subgridЭффект.

Поскольку упоминается CSS Grid, давайте поговорим о CSS.gapатрибутировать его. Это свойство не только уникально для макета Grid, оно доступно в макетах CSS Flexbox, Grid и с несколькими столбцами.gapАтрибуты. В макете в некоторых сценариях лучше установить расстояние между соседними элементами, чемmarginНамного легче.

от@Jen SimmonsсделанныйСообщение в ТвиттереКак вы можете видеть в Safari 14.1, он также поддерживает Flexbox.gapАтрибуты. Я проверил себя, в сеткеgapтакже поддерживается. Это не означает, что все основные браузеры теперь его поддерживают.gapатрибут:

accent-color

Эффекты пользовательского интерфейса многих элементов управления в Интернете следуют системе. Например, некоторые элементы управления в формах, такие как часто используемые поля ввода (<input>), переключатели, флажки, индикаторы выполнения и т. д.

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

Чтобы позволить разработчикам лучше удовлетворять потребности дизайнеров и быстро унифицировать сетку пользовательского интерфейса для различных платформ,CSS Basic User Interface Module Level 4недавно добавленныйaccent-colorАтрибуты, вы можете легко управлять пользовательским интерфейсом Web Control (Widget Accent):

:root { 
    accent-color: deeppink; 
} 

@media (prefers-color-scheme: dark) { 
    :root { 
        accent-color: hsl(328 100% 65%); 
    }
}

Теперь, когда вы говорите об элементах управления в веб-формах,Итак, позвольте мне рассказать вам две вещи о<input>атрибуты элементов. Потому что эти два свойства могут улучшить работу ваших пользователей, особенно при работе с формой. помимо предоставления<input>элементальtypeПри указании разных значений, помимо предоставления разных типов клавиатуры, вы также можете использоватьinputmodeАтрибуты:

inputmodeМожно вызвать различные типы программных клавиатур, еще один способ улучшить взаимодействие с пользователем — дать<input>элементальenterkeyhintсвойство для установки различных значений, вы можете изменитьEnterПоведение действий для ключевых типов:

Упомянутые выше атрибуты, будь то CSS или HTML, используются для изменения взаимодействия с пользователем. Еще один атрибут, связанный с HTML.

Начиная с Safari 15, у нас есть<meta>Помечен какtheme-colorустановить цвет,Разрешить разработчикам управлять собственными цветами пользовательского интерфейса браузера.:

Специальное заявление, здесьtheme-colorЭто не свойство CSS, это HTML<meta>элементальnameЗначение, в комбинацииcontentа такжеmediaМожет легко управлять цветом на системном уровне.

Кажется, не в тему! Мы говорим о CSS в 2022 году! Эм! Итак, вернемся в мир CSS.

запросы средств массовой информации

CSS медиа-запросы@mediaНе новая функция (за исключением некоторых новыхПользовательские настройки Условия Настройки). Но то, что я собираюсь представить сегодня, это то, как написаны его правила грамматики. Давайте сначала сфотографируем:

в прошлом@mediaили в@containerИспользуется при написании условий суждения в правилахmin-widthа такжеmax-widthБолее того, я не знаю, у всех ли такое же чувство, как у меня, используйтеmin-widthа такжеmax-widthЧасто глупо различать их масштабы. Для этого я всегда предпочитаю использовать следующий график для вынесения суждений:

посколькуCSS Media Queries Level 4 В начале мы можем использовать более знакомые математические выражения, которые используются в условии среды>,>=,<или<=и другие математические выражения:

используется на изображении выше@mediaСинтаксис следующий:

/* Old Way */
@media (max-width: 768px) {
    …
}

@media (min-width: 375px) {
    …
}

@media (min-width: 375px) and (max-width: 768px) {
    ...
}

/* New Way */
@media (width <= 768px) {
    …
}

@media (width >= 375px) {
    …
}

@media (375px <= width <= 768px) {
    ...
}

Точно так же выражения математических операторов сравнения также могут использоваться в@containerСостояние запроса контейнера оценивается.

Если вам интересно узнать о медиа-запросах, вы также можете прочитать:

F-mods

F-mods — это сокращение от Font Metrics Override Descriptors. это соответствуетCSS Fonts Module Level 4Технические характеристики@font-faceодиннадцатый раздел раздела, а именноМетрики шрифта по умолчанию переопределяют. Проще говоря, в@font-faceдобавлено в правилаascent-override,descent-override,line-gap-overrideа такжеadvance-overrideРавные свойства:

@font-face { 
    font-family: 'Arial' src: local('Arial'); 
    --unitsPerEm: 1000; 
    --lineGap: 10; 
    --descender: -237; 
    --ascender: 1041; 
    --advanceWidthMax: 815; 
    ascent-override: calc(var(--ascender) / var(--unitsPerEm) * 100%); 
    descent-override: calc(var(--descender) / var(--unitsPerEm) * 100%); 
    line-gap-override: calc(var(--lineGap) / var(--unitsPerEm) * 100%); 
    advance-override: calc(var(--advanceWidthMax) / var(--unitsPerEm)); 
}

вadvance-overrideОн еще не вошел в спецификацию W3C и в настоящее время является только предложением; иascent-override,descent-overrideа такжеline-gap-overrideСвойства теперь реализованы в Chromium 87+ и Firefox 89+!

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

вascent-override,descent-overrideа такжеline-gap-overrideДескрипторы позволяют полностью исключить смещения по вертикали, так как все три дескриптора влияют на высоту строки.

существуетСпецификация модуля шрифтов CSS уровня 5в и для@font-faceВ правила добавлено несколько новых свойств. Например, чтобы переопределить верхние индексы шрифта (sup) и нижние индексы (sub)superscript-position-override, subscript-position-override,superscript-size-overrideа такжеsubscript-size-overrideДескриптор. Хотя эти несколько свойств еще не поддерживаются ни одним браузером, это надежда для веб-разработчиков.

Кроме того, добавленsize-adjustДескриптор, он позволяет нам настроить коэффициент пропорциональности (в процентах). Этот дескриптор заменяется ранее упомянутымadvance-overrideДескриптор. так как@Addy Osmani в своем твиттере, описывается какsize-adjust:

size-adjustУже поддерживается в Chromium 92+ и Firefox 89+.

Говоря о@font-faceТогда необходимо упомянуть еще одну функцию CSS, которую все всегда ожидали, чтоleading-trim:

leading-trimЕго основная функция заключается в изменении макета текста.

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

h1 { 
    text-edge: cap alphabetic; 
    leading-trim: both; 
}

используется в примереtext-edgeсвойств, просто используйте следующую диаграмму, чтобы описать их роль:

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

Преобразование CSS следующего поколения

Это чем-то похоже на медиа-запрос CSS, упомянутый ранее. Не новая функция CSS, вCSS Transform Level 2используется в спецификацииtransformатрибутrotate(),scale(),translate()Функции становятся независимыми свойствами CSS. И все они стали экспериментальными свойствами в основных браузерах, и вы можете испытать их в браузере.

element {
    scale: 2;
    rotate: 30deg;
    translate: -50% -50%;
}

Сковорода (translate), повернуть (rotate) и масштабирование (scale) позволяет разработчикам задавать простые преобразования независимо друг от друга способом, совместимым с типичным использованием пользовательского интерфейса, без необходимости запоминать порядок в преобразованиях, что делаетtransform(),rotate()а такжеscale()Действия остаются независимыми и функционируют в экранных координатах.

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

@keyframes individual {
    50% {
        translate: 0 50%;
    }
    75% {
        scale: 1;
    }
}

element {
    transition:  rotate 200ms ease-in-out, scale 500ms linear;
}

element:hover {
    scale: 2;
    rotate: -3deg;
}

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

Экспериментальное свойство

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

Вложение CSS

Картинка выше выглядит знакомой, да! Но это не вложение в SCSS, это вложение в родной CSS. Это новаторское дополнение к CSS и еще одно дополнение к продолжающимся пользовательским свойствам CSS (переменным CSS). Раньше такие правила можно было запускать только в процессорах CSS.

Во вложенных модулях CSS мы можем использовать&а также@nestПравило вкладывает блок правил стиля в другой блок правил стиля:

table.colortable {
    & td {
        text-align: center;
        &.c { text-transform: uppercase }
        &:first-child, &:first-child + td { border: 1px solid black }
    }
    & th {
        text-align: center;
        background: black;
        color: white;
    }
    @nest footer & {
        font-size: 0.8em;
    }
}

Для более подробного ознакомления с собственным вложением в CSS вы можете прочитатьГрафический CSS: вложение CSS" статья.

Область действия CSS:@scope

CSS Cascading and Inheritance Level 5введен в@layerправила, будетLevel 6 будет введено другое правило@scope. Это способ расширить диапазон стилей до дерева DOM.

<!-- HTML -->
<div class="dark-theme">
    <a href="#">plum</a>
    <div class="light-theme">
        <a href="#">also plum???</a>
    </div>
</div>

/* 当.light-theme和.dark-theme被嵌套时，你可能不会得到预期的结果 */
.light-theme a { 
    color: purple; 
}

.dark-theme a { 
    color: plum; 
}

/* 通过范围划分，我们可以解决这个问题，因为a元素的样式将由其最近的范围来确定 */
@scope (.light-scheme) {
    a { 
        color: darkmagenta; 
    }
}

@scope (.dark-scheme) {
    a { 
        color: plum; 
    }
}

@when ... @else

@when ... @elseдаCSS Conditional Rules Module Level 5Новые функции, их можно использовать отдельно или в комбинации.

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
    /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
    /* B */
} @else {
    /* C */
}

@Stefan Judis Добавьте это свойство CSS (@when ... @else) имеет вышеупомянутую функцию CSS, то есть запросы контейнера CSS и математические выражения запроса мультимедиа объединены, перепроектируяConditional Border Radius In CSS"Условная настройка скругления углов, упомянутая в статье:

Переработанная схема @Stefan Judis:

В дополнение к решениям, упомянутым здесь, на самом деле существуют и другие решения для условной установки радиуса угла.Если вы хотите узнать, вы можете прочитать «Я только что скомпилировал несколько дней назад»Условные приемы скругления углов в CSS" статья.

прокрутка и анимация

Упомянутые здесь прокрутка и анимация относятся кScroll-linked Animationsпредставлено в модуле@scroll-timelineправила иanimation-timelineАтрибуты. Вы можете связать анимацию CSS со смещением прокрутки контейнера прокрутки. Когда вы прокручиваете контейнер вверх или вниз, связанная анимация будет двигаться вперед или назад соответственно.

Например, как следующий эффект:

Нажмите здесь, чтобы просмотреть видеоэффект

использовать@scroll-timelineправила иanimation-timelineЧтобы создать эффект, подобный приведенному выше, выполните следующие три шага:

/* (1) Define Keyframes */
@keyframes adjust-progressbar {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* (2) Define a ScrollTimeline */
@scroll-timeline scroll-in-document {
    source: auto;
    orientation: block;
    scroll-offsets: 0, 100%;
}

/* (3) Attach the Animation + set the ScrollTimeline as the driver for the Animation */
#progressbar {
    animation: 1s linear forwards adjust-progressbar;
    animation-timeline: scroll-in-document;
}

Для более подробного ознакомления с этим вы можете прочитать серию руководств, предоставленных @Bramus:

Переменные CSS Houdini:@property

@propertyиспользуется для регистрации переменной, переменная представляет собойCSS Houdiniпеременная в , но ее использование иПользовательские свойства в CSS (переменные CSS)То же самое, разница в способе регистрации:

// Chrome 78+
// 需要在 JavaScript脚本中注册
CSS.registerProperty({
    'name': '--custom-property-name',
    'syntax': '<color>',
    'initialValue': 'black',
    'inherits': false
})

// Chrome 85+
// 在CSS文件中注册
@property --custom-property-name {
    'syntax': '<color>',
    'initialValue': 'black',
    'inherits': false
}

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

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

@property --milliseconds {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}
.counter {
    counter-reset: ms var(--milliseconds);
    animation: count 1s steps(100) infinite;
}

@keyframes count { 
    to {
        --milliseconds: 100;
    }
}

Нажмите здесь, чтобы просмотреть видеоэффект

положить его иAPI рисования для CSS HoudiniВместе вы можете сделать больше:

Больше эффектов в этом направлении можно найти всайт houdini.howЧитать дальше:

CSS Houdini в@propertyА Paint API — это расширение текущих возможностей CSS, если вам это интересно, вы можете прочитать:

Схема водопада

Водопады текутЭто один из классических макетов в Интернете. До сих пор схема каскадного потока, реализованная с помощью JavaScript, по-прежнему остается основным техническим решением, хотя использованиеТехнология CSS может завершить макет потока водопада при определенных условиях., но его ограничения также больше.

существуетСобственная каскадная схема компоновки CSS доступна в последнем модуле CSS Grid.:

.masonry { 
    display: grid; gap: 20px; 
    grid: masonry / repeat(auto-fill, minmax(250px, 1fr)); 
}

Но это всегда было экспериментальным свойством в Firefox, и я не видел поддержки в других браузерах, но я ожидаю, что когда-нибудь в 2022 году CSS Grid реализует каскадную компоновку в основных браузерах. Эффект.

резюме

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

Наконец, я надеюсь, что приведенный выше контент поможет вам понять некоторые новые вещи в CSS и открыть для себя неизведанные территории! Спасибо! (^_^)

Категории