На Boosty опубликовала статью с дополнительными примерами использования :is(). Доступно подписчикам тарифа «Мидл на прокачку» - boosty.to/annblok/purchase/751559
Отличный урок по оптимизации CSS с использованием :is(). Спасибо за подробное объяснение и примеры! Теперь моя таблица стилей будет намного более компактной и понятной. Продолжайте делиться полезными советами!
@@Alexandr_Zavgorodniy А смысл такой стиль выбирать, который приходится превозмогать через дополнительные селекторы? Пишите в одну строку все, что меньше условных 80 символов и нет проблем. Считаете, что это нечитаемо - ну так и внутри :is - это будет нечитаемо. PS: скорее всего нужно было привести более сложный пример что-то вроде ":is(div, p) : is(span, a)" вместо четырех вариантов. Тогда было бы понятнее что сокращается.
Анна, вы в недавнем интервью в Разрабах назвали несколько сайтов источников, где вы черпаете информацию. Не все смогла на слух разобрать. Не могли бы вы написать или дать ссылки? Большое спасибо!
Ахаха. "В любом случае она у нас записывается в одну строчку, а не в две, как в предыдущем примере...". Да это же самообман. Код стал длиннее на 5 символов, а не короче на одну строчку, потому что вы не стали переносить баттон, а в примере выше перенесли. Жуликовато вышло, жуликовато.
Можно вообще весь css писать в одну строку вот только читать это будет сложно. А еще а компаниях существуют кодстайлы где каждый селектор нужно писать в новой строке. Ну и данный селектор можно записать так: :is(input, button):focus
@@Alexandr_Zavgorodniy, вы всё-таки согласны со мной, что пример получился жуликоватым и предложили свой вариант. Ваш вариант мне нравится больше. Но, в целом, я пишу по старинке.
В Википедии говорится, что "CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц".
Отличная идея использовать что то типа pandacss, uno, tailwind 4 на крайняк... Ну или простт dx адобовский. А если пошло говоря, можно таилвинд в панде)
Где тут функционал, который нельзя было бы решить обычной (интуитивно более понятной) вложенностью, которая, если я правильно понял, тоже на пути к тотальной поддержке?
На Boosty опубликовала статью с дополнительными примерами использования :is(). Доступно подписчикам тарифа «Мидл на прокачку» - boosty.to/annblok/purchase/751559
Отлично рассказали про "Поддержку" этого новинка 👍
Отличный урок по оптимизации CSS с использованием :is(). Спасибо за подробное объяснение и примеры! Теперь моя таблица стилей будет намного более компактной и понятной. Продолжайте делиться полезными советами!
8:00 а что мешает строки 56 и 57 записать в одну строчку? Она даже короче будет чем с is.
Кодстайл мешает.
@@Alexandr_Zavgorodniy А смысл такой стиль выбирать, который приходится превозмогать через дополнительные селекторы? Пишите в одну строку все, что меньше условных 80 символов и нет проблем. Считаете, что это нечитаемо - ну так и внутри :is - это будет нечитаемо.
PS: скорее всего нужно было привести более сложный пример что-то вроде ":is(div, p) : is(span, a)" вместо четырех вариантов. Тогда было бы понятнее что сокращается.
Просто плюсик в поддержку очень полезных роликов :)
Большое спасибо за полезную информацию. Очень качественный и подробный обзор.
Спасибо вам большое за такой содержательный ролик по псевдоклассу. Я о нём не знала буду использовать🤗
Как всегда по полочкам, где выделяем плюсы и минусы, и без траты лишнего времени.
Хорошие советы которые улучшат работу
Я о таком даже и не думал, спасибо за годный совет.
Кто не хочет терять своё драгоценное время тот должен следить за новинками и делать быстро
Последний пример...Ну такое себе преимущество)
Вот так его можно записать:
:is(input, button) :focus {
outline: none;
}
Или так input,button{&:focus {ouline:none}}
@@виртуоз_ру верно, так тоже можно записать
Всё время думал, зачем этот :is() пишут в CSS, а вот оно что...
Че почитать из нового по css Ань, подскажи, книжку какую нить 🙂👍
Однозначно буду использовать и рекомендовать другим.
А смысл?
Очень интересно было узнать про is() - но мне кажется что 80 процентов верстальщиков по-прежнему используют старую, без всяких наворотов, верстку.
а зачем нужен :is() если есть css nesting?
Анна, вы в недавнем интервью в Разрабах назвали несколько сайтов источников, где вы черпаете информацию. Не все смогла на слух разобрать. Не могли бы вы написать или дать ссылки? Большое спасибо!
Говорила про WebDX Community Group
Скажите, через 10 дней курс, но я не успел получить скидку, когда наступает момент оплаты, стоимость полная, это можно как небудь решить или уже нет??
Напишите нам на support@frontendblok.com
Ахаха. "В любом случае она у нас записывается в одну строчку, а не в две, как в предыдущем примере...". Да это же самообман. Код стал длиннее на 5 символов, а не короче на одну строчку, потому что вы не стали переносить баттон, а в примере выше перенесли. Жуликовато вышло, жуликовато.
Можно вообще весь css писать в одну строку вот только читать это будет сложно. А еще а компаниях существуют кодстайлы где каждый селектор нужно писать в новой строке. Ну и данный селектор можно записать так: :is(input, button):focus
@@Alexandr_Zavgorodniy, вы всё-таки согласны со мной, что пример получился жуликоватым и предложили свой вариант. Ваш вариант мне нравится больше. Но, в целом, я пишу по старинке.
заюзаем. сэнкс.
Ролик больше для продвинутых. Для новичков немного сложновато...
1-ый!
Можешь себя не снимать? А то о CSS не думается :)
3 и 4 пример уже плохо читаемый код по сравнению с аналогами без :is
Вы супер, ваши видео очень полезны для многих, спасибо
Благодарю за ролик! Приятно узнать новое, причем ещё с такой отменной поддержкой
Новое всегда приятно узнать главное чтобы с пользой дела
кресло "рука блуди", лайк)
Добрый день, а почему просто не написать например - .link:hover, :focus {} ? Мне кажется это короче
В Википедии говорится, что "CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц".
Отличная идея использовать что то типа pandacss, uno, tailwind 4 на крайняк... Ну или простт dx адобовский. А если пошло говоря, можно таилвинд в панде)
Прикольно, лет 5 не писал сайты. Много поменялось в html, css, js?
В последнем примере вообще не ни какой пользы. По мне так переизбыточность.
Учитывая тот факт что лучше быть в курсе всех новинок, и хочется не отставать то мониторить надо
Годнота! Попробую на досуге! Спасибо
Спасибо за полезный контент!
30%. на все тарифа!!!
Где тут функционал, который нельзя было бы решить обычной (интуитивно более понятной) вложенностью, которая, если я правильно понял, тоже на пути к тотальной поддержке?
:is() во вложенности тоже можно использовать, вопрос только в том, что сами вложенности пока рано в рабочих проектах использовать
Спасибо
Молодец, интересные видео!
как всегда видео снято суперски, вы огромная молодец что снимаете подобные видео, интересно было слушать
Подчеркнул для себя очень много плюсов. Спасибо за такой пошаговый обзор
А говорят блондинки глупые😂,Анна вы огромная молодец,ролик получился доступно понятным,но в тоже время профисионально изложил ❤
Спасибо за очередной интересный и полезный урок. Вы хороший учитель.
Вы очень всё внятно и понятно объясняете! Думаю тем, кому недостаточно знаний в CSS обязательно станут учащимися ваших курсов!
Ой Аннушка, люблю тебя смотреть, сам как раз пишу сайт и мне твои советы и видео помогают
Очень интересно узнавать что-то новое для себя из каждого вашего ролика.
Спасибо за ролик! Очень мне помог!
Ничего не понятно, от слова совсем 😂
Новые возможности это круто а что с поддержкой ?
Можно будет использовать через 3-4 года?
Смотрите видео до конца
Почему перед :is в одним случае пробел ставим, в другом - нет?
Без пробела когда работаем с псевдо классами или классами непосредственно у элемента. В случае с элементами внутри чего-то, то ставим пробел
@@olegivanov6231 точно! Спасибо))