Сокращай и упрощай CSS с помощью :is()

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

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

50% 1

🔥 22 апреля стартует продвинутый курс по вёрстке - frontendblok.com/courses/adva...
⚡️ Скидка 30% на любой тариф до конца недели
Демо - codepen.io/anna_blok/pen/MWRXGLO
Boosty «‎Мидл на прокачку» - boosty.to/annblok/purchase/75...
Таймкоды:
00:00 Вступление
00:18 Продвинутый курс
01:01 Пример 1
02:56 Пример 2
03:58 Boosty
04:29 Пример 3
06:36 Пример 4
08:08 Поддержка
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com

Развлечения

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

31 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

На Boosty опубликовала статью с дополнительными примерами использования :is(). Доступно подписчикам тарифа «‎Мидл на прокачку» - boosty.to/annblok/purchase/751559

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

Отлично рассказали про "Поддержку" этого новинка 👍

@user-wn9tk3uk5u Месяц назад

Отличный урок по оптимизации CSS с использованием :is(). Спасибо за подробное объяснение и примеры! Теперь моя таблица стилей будет намного более компактной и понятной. Продолжайте делиться полезными советами!

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

Просто плюсик в поддержку очень полезных роликов :)

@user-bz8wg2lw1c Месяц назад

Вы супер, ваши видео очень полезны для многих, спасибо

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

Большое спасибо за полезную информацию. Очень качественный и подробный обзор.

@user-rb3sw3ku6t Месяц назад

Благодарю за ролик! Приятно узнать новое, причем ещё с такой отменной поддержкой

@user-ct2dv3vr1n Месяц назад

Новое всегда приятно узнать главное чтобы с пользой дела

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

Спасибо за полезный контент!

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

Годнота! Попробую на досуге! Спасибо

@user-sy2cz1yw6u Месяц назад

Спасибо вам большое за такой содержательный ролик по псевдоклассу. Я о нём не знала буду использовать🤗

@user-lt7ov6us6f Месяц назад

Хорошие советы которые улучшат работу

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

Вы очень всё внятно и понятно объясняете! Думаю тем, кому недостаточно знаний в CSS обязательно станут учащимися ваших курсов!

@user-yn8hb2gm7k Месяц назад

Молодец, интересные видео!

@user-ht1re6th2i Месяц назад

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

@jason.r7921 Месяц назад

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

@user-xz2ww6ys8n Месяц назад

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

@user-yt4mh2xg9r Месяц назад

8:00 а что мешает строки 56 и 57 записать в одну строчку? Она даже короче будет чем с is.

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

Кодстайл мешает.

@user-yt4mh2xg9r Месяц назад

@@Alexandr_Zavgorodniy А смысл такой стиль выбирать, который приходится превозмогать через дополнительные селекторы? Пишите в одну строку все, что меньше условных 80 символов и нет проблем. Считаете, что это нечитаемо - ну так и внутри :is - это будет нечитаемо. PS: скорее всего нужно было привести более сложный пример что-то вроде ":is(div, p) : is(span, a)" вместо четырех вариантов. Тогда было бы понятнее что сокращается.

@user-rq6zz2ex8v Месяц назад

Спасибо за ролик! Очень мне помог!

@user-dh1gs5lj8w Месяц назад

Очень интересно узнавать что-то новое для себя из каждого вашего ролика.

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

Спасибо за очередной интересный и полезный урок. Вы хороший учитель.

@user-cc8sb9hy4w Месяц назад

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

@user-xg4ji5vd1r Месяц назад

Я о таком даже и не думал, спасибо за годный совет.

@user-ho9bc3dh7r Месяц назад

А говорят блондинки глупые😂,Анна вы огромная молодец,ролик получился доступно понятным,но в тоже время профисионально изложил ❤

@user-qm5fv5by5z Месяц назад

кресло "рука блуди", лайк)

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

Учитывая тот факт что лучше быть в курсе всех новинок, и хочется не отставать то мониторить надо

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

Спасибо

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

Кто не хочет терять своё драгоценное время тот должен следить за новинками и делать быстро

@user-dw2tc4cq9x Месяц назад

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

@user-up4oo3wm4t Месяц назад

Отличная идея использовать что то типа pandacss, uno, tailwind 4 на крайняк... Ну или простт dx адобовский. А если пошло говоря, можно таилвинд в панде)

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

Последний пример...Ну такое себе преимущество)

@virtuoz-ru Месяц назад

Вот так его можно записать: :is(input, button) :focus { outline: none; }

@user-ms8cb2vk6c Месяц назад

Или так input,button{&:focus {ouline:none}}

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

@@virtuoz-ru верно, так тоже можно записать

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

Че почитать из нового по css Ань, подскажи, книжку какую нить 🙂👍

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

Всё время думал, зачем этот :is() пишут в CSS, а вот оно что...

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

Прикольно, лет 5 не писал сайты. Много поменялось в html, css, js?

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

Добрый день, а почему просто не написать например - .link:hover, :focus {} ? Мне кажется это короче

@user-nh8um2dn9s Месяц назад

Однозначно буду использовать и рекомендовать другим.

@user-wj4pc7te1j Месяц назад

А смысл?

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

Очень интересно было узнать про is() - но мне кажется что 80 процентов верстальщиков по-прежнему используют старую, без всяких наворотов, верстку.

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

Скажите, через 10 дней курс, но я не успел получить скидку, когда наступает момент оплаты, стоимость полная, это можно как небудь решить или уже нет??

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

Напишите нам на support@frontendblok.com

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

30%. на все тарифа!!!

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

Анна, вы в недавнем интервью в Разрабах назвали несколько сайтов источников, где вы черпаете информацию. Не все смогла на слух разобрать. Не могли бы вы написать или дать ссылки? Большое спасибо!

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

Говорила про WebDX Community Group

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

Новые возможности это круто а что с поддержкой ? Можно будет использовать через 3-4 года?

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

Смотрите видео до конца

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

а зачем нужен :is() если есть css nesting?

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

Почему перед :is в одним случае пробел ставим, в другом - нет?

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

Без пробела когда работаем с псевдо классами или классами непосредственно у элемента. В случае с элементами внутри чего-то, то ставим пробел

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

@@olegivanov6231 точно! Спасибо))

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

заюзаем. сэнкс.

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

3 и 4 пример уже плохо читаемый код по сравнению с аналогами без :is

@Alex-mi2ij Месяц назад

Ролик больше для продвинутых. Для новичков немного сложновато...

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

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

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

:is() во вложенности тоже можно использовать, вопрос только в том, что сами вложенности пока рано в рабочих проектах использовать

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

1-ый!

@user-ms8cb2vk6c Месяц назад

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

@user-sf2xu4lb2k Месяц назад

Ахаха. "В любом случае она у нас записывается в одну строчку, а не в две, как в предыдущем примере...". Да это же самообман. Код стал длиннее на 5 символов, а не короче на одну строчку, потому что вы не стали переносить баттон, а в примере выше перенесли. Жуликовато вышло, жуликовато.

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

Можно вообще весь css писать в одну строку вот только читать это будет сложно. А еще а компаниях существуют кодстайлы где каждый селектор нужно писать в новой строке. Ну и данный селектор можно записать так: :is(input, button):focus

@user-sf2xu4lb2k Месяц назад

@@Alexandr_Zavgorodniy, вы всё-таки согласны со мной, что пример получился жуликоватым и предложили свой вариант. Ваш вариант мне нравится больше. Но, в целом, я пишу по старинке.