Самые новые фичи CSS к началу 2024 - scoped CSS, @starting-style, nesting CSS

Рет қаралды 6,498

Күн бұрын

Посмотрим на самые новые фичи CSS, которая должны появится во всех браузерах в будущем и сильно повлиять на то, как мы пишем CSS.
🔗 Ссылки:
🎓 Мой курс по HTML и CSS: purpleschool.ru/course/html-css
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:14 - О чём?
1:05 - @scope - scoped css
7:57 - @starting-style
11:21 - CSS nesting / nested CSS
19:43 - Заключение

Пікірлер: 60

@PurpleSchool 5 ай бұрын

🔗 Ссылки: 🎓 Мой курс по HTML и CSS: purpleschool.ru/course/html-css 💬 Telegram канал с полезными советами: t.me/purple_code_channel

@eugenefedoryachenko8793 5 ай бұрын

Очень крутые нововведения! Спасибо за видео!

@PurpleSchool 5 ай бұрын

Спасибо

@geek7807 5 ай бұрын

Круто. Думаю, лет через 20 мы сможем начать это использовать, когда у 99% пользователей будут версии браузеров, поддерживающие это. ^_^

@PurpleSchool 5 ай бұрын

Сейчас уже развитие идёт быстрее, поэтому думаю что скорее сможем

@user-bd8du6bh3g 5 ай бұрын

Великолепно. Скоуп это очень круто. Можно больше не страдать node-sass.

@PurpleSchool 5 ай бұрын

Именно)

@StarkElessar 5 ай бұрын

а чем вам node-sass помогал, подскажите пож.

@user-rk6bh3vv9b 5 ай бұрын

спасибо, Антон, полезно!

@PurpleSchool 5 ай бұрын

Спасибо!

@tackesi 5 ай бұрын

Любопытно, спасибо

@PurpleSchool 5 ай бұрын

Пожалуйста)

@tackesi 5 ай бұрын

@@PurpleSchool из новостей было бы любопытно узнать кто что использует на рынке, на что переходит, какие тенденции. Что там с ban, Какие-то браузерные Dev tools новые Просто странности связанные с ВЭБом.

@hooked74 5 ай бұрын

starting-style - давно ждал чего-то подобного, прям очень сильно упрощает микроанимации. Уйдут все js’ные костыли. Жаль, что только нормальной поддержки еще долго придется ждать...

@PurpleSchool 5 ай бұрын

Да

@kickdoe6793 5 ай бұрын

Анимация дисплей нан это хорошо, еще бы height: auto сделали возможно анимировать, вообще бы им цены не было)

@PurpleSchool 5 ай бұрын

👍

@okuzmenko 4 ай бұрын

Привет, классные видео! Можешь подсказать что у тебя за тема стоит в VS Code?

@PurpleSchool 4 ай бұрын

Спасибо! Bearded Theme Vivid Purple

@smotritelyoutube 5 ай бұрын

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

@PurpleSchool 5 ай бұрын

👍

@RainbowJet1 5 ай бұрын

6-летние версии сафари как всегда передают привет всем новинкам :(

@PurpleSchool 5 ай бұрын

Да...

@michaelkamko 5 ай бұрын

Starting style сейчас можно делать через анимацию. Почти то же самое, но есть нюансы. Спасибо за новые полезные фичи и интересную подачу.

@PurpleSchool 5 ай бұрын

Спасибо!

@egorovsa 5 ай бұрын

Спасибо за ролик. Лишь вот что хотел сказать что стоит следить за селекторами и при необходимости всегда ссылаться на 1 уровень дочерних элементов через знак ">". т.е .card { & > h2 { /// }} в таком случае селектор будет искать совпадение только на 1 дочернем уровне . а не по всем.

@PurpleSchool 5 ай бұрын

Да, верно

@kolyan4d 5 ай бұрын

Если по старинке через css препроцессор, то в SASS/SCSS уже давно все было, по факту собирается рабочий css, только в SASS/SCSS можно еще писать функции, миксины, циклы и более расширенный тип данных, не только vars, например, есть объекты и списки

@Commondore 5 ай бұрын

Scope штука интересная, ждём вскоре её в популярных Фреймворках и библиотеках типа react и vue. Хотел задать вопрос про дублирование медиа запросов и понял, что мыслю ещё через препроцессоры😅😅😅. Спасибо за видео 👍

@PurpleSchool 5 ай бұрын

Пожалуйста)

@virtuoz-ru 5 ай бұрын

Во Vue давно уже есть scope на уровне компонента.

@PurpleSchool 5 ай бұрын

@@virtuoz-ru да в любом фреймворке за счёт css modules

@user-hv3lt6bx9z 5 ай бұрын

кроме возможности с to особо не увидел, чем scope отличается от модулей в плане возможности изолирования

@PurpleSchool 5 ай бұрын

Он помогает если не использовать модули

@romanpetrashkevich5292 5 ай бұрын

Привет. Ты не мог бы рассказать про CSS Layers?

@PurpleSchool 5 ай бұрын

Возможно затрону в видео

@kind1y 5 ай бұрын

Очень жду nesting. Препроцессоры уже будут не нужны)

@PurpleSchool 5 ай бұрын

Поддерживаю)

@StarkElessar 5 ай бұрын

@@PurpleSchool рано еще) миксины, функции и многое другое, вот когда нативный css будет уметь всё что умеет scss тогда и можно уходить от препроцессоров. ИМХО.

@---Maksim--- 5 ай бұрын

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

@PurpleSchool 5 ай бұрын

Да, но будет отлично убрать препроцессоры из инструментария проекта

@StarkElessar 5 ай бұрын

@@PurpleSchool но за годы работы, препроцессоры это изичь, мне лично не мешают

@user-sj7tf2yv3m 5 ай бұрын

1:40 решается нестингом в css

@PurpleSchool 5 ай бұрын

Да, как и рассказываю далее)

@virtuoz-ru 5 ай бұрын

Все

@PurpleSchool 5 ай бұрын

👍

@roman6504 5 ай бұрын

Это все конечно зашибись, но пока не будет caniuseit 95% - пользоваться этим нельзя. А пока нельзя, значит простое забивание головы.

@PurpleSchool 5 ай бұрын

Это даёт понимание, куда двигается CSS и как развивается.

@ilyaprotsenko1023 5 ай бұрын

Лайкните те, кто помнит времена табличной верстки 😁

@PurpleSchool 5 ай бұрын

Да, а потом были float)

@midrala 5 ай бұрын

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

@PurpleSchool 5 ай бұрын

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

@TarasovFrontDev 5 ай бұрын

Я правильно понял, @scope - тупо вложенные селекторы scss?

@PurpleSchool 5 ай бұрын

нет, он ограничивает действие правил определёнными рамками

@Sskame 5 ай бұрын

ладно

@PurpleSchool 5 ай бұрын

))

@viktordev1218 5 ай бұрын

как же душно в комментариях

@OleqSedler 3 ай бұрын

Нуты и нудный

@mushnikov35 5 ай бұрын

Наверно окей, но препроцы еще поживут и довольно долго минимум года 3-4, @import, @extend, @include, @if, function, mixin и тд. помогают быстрее писать css !

@PurpleSchool 5 ай бұрын

Это пока верно