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

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

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

50% 1

Посмотрим на самые новые фичи 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 - Заключение

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

15 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

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

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

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

Спасибо

@user-rk6bh3vv9b 5 месяцев назад

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

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

Спасибо!

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

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

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

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

@user-bd8du6bh3g 5 месяцев назад

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

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

Именно)

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

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

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

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

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

Пожалуйста)

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

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

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

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

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

Да

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

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

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

Спасибо!

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

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

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

👍

@okuzmenko 3 месяца назад

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

@PurpleSchool 3 месяца назад

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

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

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

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

Да, верно

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

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

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

Пожалуйста)

@virtuoz-ru 5 месяцев назад

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

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

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

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

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

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

👍

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

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

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

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

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

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

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

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

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

Да...

@user-hv3lt6bx9z 5 месяцев назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@virtuoz-ru 5 месяцев назад

Все

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

👍

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

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

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

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

@user-sj7tf2yv3m 5 месяцев назад

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

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

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

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

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

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

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

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

ладно

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

))

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

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

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

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

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

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

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

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

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

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

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

Нуты и нудный

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

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

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

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