CSS Layers | Слои - киллер-фича будущего

Подписаться 22 тыс.

Просмотров 13 тыс.

50% 1

✏️ Разбираем новинку CSS - Layers, слои, переворачивающие представление о привычном каскаде стилей.
🔴 Timeline:
▶ 00:00 | О чем видео
▶ 00:15 | Что такое каскадные слои
▶ 00:29 | Проблема специфичности и каскада
▶ 02:04 | Директива @layer - собственные слои каскада
▶ 02:23 | Верхнеуровневое правило layer
▶ 03:14 | Наследуемые layers и их приоритет относительно друг друга
▶ 03:41 | Порядок слоев в браузере
▶ 04:01 | Положение layers в математике каскада
▶ 05:44 | Области применения
▶ 07:06 | Поддержка браузерами
▶ 07:20 | Заключение
📚 Полезные ссылки:
➖ Директива @layer на MDN: developer.mozilla.org/en-US/d...
➖ Спецификация Cascade Layers на W3C: www.w3.org/TR/css-cascade-5/#...
➖ Плагин-полифилл @csstools/postcss-cascade-layers: www.npmjs.com/package/@csstoo...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #html

Опубликовано:

30 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@AleksanderLamkov 10 месяцев назад

Пожалуй, забыл рассказать самое главное - как управлять всем этим добром через JavaScript. На данный момент работает такая схема: tppr.me/GSvA4 В HTML в head добавляем два тега style, в первом задается порядок слоев, во втором - импортируется основной файл стилей и файл с темизацией с присвоением имен слоев. Если нужно поменять порядок темы, то нужно отредачить первый тег style, поменять строки местами. Костыльно, но это то, что есть на данный момент. Можно было бы написать утилитарную функцию, которая делает это изящнее. Вообще, уверен, что JS API к этой фиче рано или поздно должны подвезти.

@Mr.Bellamy 10 месяцев назад

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

@AleksanderLamkov 10 месяцев назад

Согласен, удобное API не помешало бы. На данный момент работает такая схема: tppr.me/GSvA4 В HTML в head добавляем два тега style, в первом задается порядок слоев, во втором - импортируется основной файл стилей и файл с темизацией с присвоением имен слоев. Если нужно поменять порядок темы, то нужно отредачить первый тег style, поменять строки местами. Костыльно, но это то, что есть на данный момент.

@MrJloa 2 месяца назад

Самое важное забыл сказать, что стили, у которых не задан layer будут всегда иметь самую высшую специфичность ибо попадут в анонимный слой. И, я так понимаю, чтобы засосать ваш любимый фреймворк в слой, придется юзать костыль с import + layer, чтобы контролировать в какой слой утечет фреймворк. Жаль, но пока нет возможности указать слой в атрибутах style тега (а хотелось бы, привет сборщики)

@HandsomeRoman 10 месяцев назад

Стоит упоминуть, что нужно обновить style-loader до 3.3.0 для поддержки @import layer. Ну и mini-css-extract-plugin до 2.7.4

@dopetag 10 месяцев назад

Ой, ну это прям дип дайв в каскады. Надо еще такого контента. Ты хорош 😉

@user-ig5zn2ni7s 10 месяцев назад

Хороший стиль изложения, спасибо)

@Atractiondj Месяц назад

Я работаю со своим фреймворком и у меня все организовано таким образом что я просто не вижу зачем мне это и как его применять, ну это пока что, поэтому я и смотрю ролики на эту тему возможно найду идеи как или если столкнусь с такой проблемой как решить. А вот @scope это фишку я жду с нетерпением, а @layer я не вижу как я могу применить, для управления цветами для тем использую дизайн токены поэтому не подходит. Но как было в свое время с subgrid я тоже не видел за каким оно мне надо, пока не столкнулся с оптимизацией некоторых элементов и для выравнивания мне идеально подходит именно subgrid. К чему я? Если вы не видите зачем вам нужно или нет новые фишки из СSS это не значит что это вообще не надо. Все мы создаем разные веши, я допустим только сайты, а кто-то еще и нативные приложения и там что-то может быть по-другому и просто новая фича вам еще не пригодилась, но не значит что она бесполезная.

@ar6u2 10 месяцев назад

А как этим делом управлять через js?

@AleksanderLamkov 10 месяцев назад

Хм. Моё упущение, что не рассказал об этом. На данный момент работает такая схема: tppr.me/GSvA4 В HTML в head добавляем два тега style, в первом задается порядок слоев, во втором - импортируется основной файл стилей и файл с темизацией с присвоением имен слоев. Если нужно поменять порядок темы, то нужно отредачить первый тег style, поменять строки местами. Костыльно, но это то, что есть на данный момент. Можно было бы написать утилитарную функцию, которая делает это изящнее. Вообще, уверен, что JS API к этой фиче рано или поздно должны подвезти.

@VitalBielik 7 месяцев назад

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

@AleksanderLamkov 7 месяцев назад

Привет! В закрепленном комментарии писал о том, как менять слои через JS. Ну а дальше всё также, как делали с переключением темы и раньше: функция смены темы привязывается к какому-нибудь чекбоксу и выбор пользователя параллельно записывается в localStorage, чтобы после перезагрузки страницы была нужная тема. На практике в реальных проектах я @layers ещё не применял, но сам функционал темизации на своём сайте (aleksanderlamkov.ru/) когда-то давно делал так: github.com/aleksanderlamkov/aleksanderlamkov/blob/main/src/components/theme-switcher/index.js

@michaelkamko 6 месяцев назад

Очень круто! Спасибо)

@ekselenUi 10 месяцев назад

Спасибо!

@smotritelyoutube 10 месяцев назад

Лайк, хорошая подача и чистая дикция, супер. Кстати что за шрифт в редакторе такой прикольный, квадратненький?

@AleksanderLamkov 10 месяцев назад

Спасибо! Шрифт - JetBrains Mono.

@user-me5lo4ib7q 10 месяцев назад

Допустим, у меня есть кнопка, которую я хочу перекрасить. Но все стили у меня в одном файле, и нет отдельного файла для стилей виджета. Я правильно понимаю, что мне нужно отыскать каскад с этой кнопкой, обернуть его в layer, как-то назвать и потом ниже написать новый layer (либо прописать порядок слоёв вверху файла) так?

@AleksanderLamkov 10 месяцев назад

Либо так, либо создать отдельный файл, например, custom.css и подключить оба файла таким образом: @layer main, custom; @import url('./main.css') layer(main); @import url('./custom.css') layer(custom);

@Ivanfwit 10 месяцев назад

когда-нибудь доберусь до этого на практике)

@bambalbino 10 месяцев назад

Гуд. Вот такого больше. Забей на этих новичков - сами разберутся (шутка).

@non_adult 10 месяцев назад

Твои ролики очки обучательные.

@AleksanderLamkov 5 месяцев назад

👋 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

@nvdedmz 10 месяцев назад

Layer это использует вроде TW уже давно

@WERWOLION 10 месяцев назад

А просто сделать z-css индекс не судьба?

@AleksanderLamkov 10 месяцев назад

Это не про z-index, а про специфичность и каскад.

@WERWOLION 10 месяцев назад

@@AleksanderLamkov ты не понял. Сделать z-css, не индекс. Индекс я написал для того чтобы ты понял как это работает. z-css 1, auto, 10000000 И не нужно танцев в бабуинами. При этом чтобы знать какой z-css, задать тупо смотришь в девтул. Ой как сложно наверное такое сделать , ведь он уже существует, просто не меняется через сss

@AleksanderLamkov 10 месяцев назад

@@WERWOLION ага, теперь понял твою идею, интересно. Ну, спецификация - вещь адаптивная, может когда-нибудь и сделают нечто подобное :)

@geldelian 5 месяцев назад

@@WERWOLION а что за z-css, который не меняется через css?

@WERWOLION 5 месяцев назад

@@geldelian z-css должен меняться , это тоже самое что z index только для величины приоретета свойств

@evgenyyakushenko4636 10 месяцев назад

Громкость видео хотелось бы повыше, а то довольно тихо!

@AleksanderLamkov 10 месяцев назад

Спасибо, учту!

@evgenyyakushenko4636 10 месяцев назад

@@AleksanderLamkov А так подача материала очень понравилась!

@CanumVenaticorum 4 месяца назад

Не нравится мне эта концепция. Прогибаются под говнокодеров?)) Если человек не осилил понятия каскада и специфичности, то ему решили навалить ещё и эти слои? Ну и мне дико не нравится название - ну какие это нафиг слои в контексте css? Под это определение больше подходит z-index

@AleksanderLamkov 4 месяца назад

Я думаю, что эта функциональность как минимум упростит поддержку проектов, где в основе интерфейс стилизован CSS-библиотекой, типа MaterialUI / AntDesign, и где нужно точечно для определенного элемента что-то переопределить.

@sersalikov 10 месяцев назад

5:05 Автор, вы уверены, что то что не наговорили глупостей, рассказывая о месте Layers в каскаде? Цитирую вас: "их приоритет выше, чем любой из вышеперечисленных", "слою наплевать на наличие important и даже на inline в атрибуте style", "он переопределит всё, что нужно". Ведь показанная вами картинка с приоритетами прямо противоречит вашим словам. Кстати, к картинке тоже есть претензия, точнее, к её самому верхнему слою. Если схема строится по принципу чем выше слой - тем выше приоритет в каскаде, этот принцип должен выдерживаться и для содержимого первого слоя. А у вас этот порядок развёрнут с ног на голову.

@AleksanderLamkov 10 месяцев назад

Привет! Спасибо за замечания. Буду откровенен. Моя цель - донести не сухую информацию строго по спецификации, а обработать её и выдать так, как её понял я. Про порядок в каскаде я нарочито показал и рассказал так (сверху вниз, от источников стилей до всем известных правил), ибо посчитал, что так людям будет понятнее. Инлайновые стили перезапишут браузерные/пользовательские/авторские, layers перезапишет все вышеупомянутое, а дальше работают стандартые правила - чем селектор специфичнее и/или ниже в коде, тем правило "главнее". Не считаю, что в моих суждениях есть противоречия.

@sersalikov 10 месяцев назад

@@AleksanderLamkov Боюсь, вы не поняли моё замечание. Я нисколько не сомневаюсь, что вы, будучи профессиональным разработчиком, правильно понимаете базовые вещи CSS. Однако я обращаю внимание, что слушая то, что вы говорите, можно прийти к ложному пониманию, противоречащему спецификации. Вы говорите/пишите "Инлайновые стили перезапишут браузерные/пользовательские/авторские, layers перезапишет все вышеупомянутое" - но это неправда, инлайновые стили важнее слоёв, они не могут их перезаписать! И ваша схема это верно показывает, инлайн стили у вас выше, чем слои. А поскольку инлайновые стили - всегда авторские, то и фраза "Инлайновые стили перезапишут браузерные/пользовательские/авторские" - бессмысленна. В вашей схеме более важное находится выше. Специфичность важнее порядка следования, слои важнее специфичности и так далее. Но этот принцип нарушается для источников. Там более важное находится ниже. Возникает внутренне противоречие в оформлении схемы, а это затрудняет понимание/усвоение материала.

@AleksanderLamkov 10 месяцев назад

@@sersalikov да, вы правы, в этом высказывании про перезапись инлайновых стилей я оговорился, спасибо за то, что указали. Про схему - учту, в следующий раз при объяснении каскада сделаю иначе.

@AlexKid555 4 часа назад

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

@AleksanderLamkov 4 часа назад

Привет! Если ты только начал изучение CSS, то советую сначала ознакомиться с моим бесплатным курсом: ru-vid.com/group/PL0MUAHwery4o9I7QQVj_RP4ZVpmdx6evz Текущая тема видео (layers) не для новичков, только запутает. Это новая фишка CSS, которая даже не всеми браузерами поддерживается.

@AlexKid555 Час назад

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

@dimonlimon1770 10 месяцев назад

Привет, наткнулся на твой канал и мне понравилась твоя подача, предлагаю ролик по css для профи, интересно что профессионалы используют в css (можно даже препроцессоры сюда добавить)

@AleksanderLamkov 10 месяцев назад

Привет! Спасибо :) По поводу идеи - всё будет, но постепенно, сначала курс по основам, затем более сложные вещи, в т. ч. препроцессор.