01:36 Окружение и разметка 03:32 Стили для основы 06:06 Переменные на Sass 09:19 Переменные на PostCSS 14:15 Фолбеки для переменных 16:20 Переопределение свойств 19:46 Переменные и свойства 22:27 Выводы и советы
@whatthepeople
4 жыл бұрын
Видосы Вадима - наркотик в чистом виде. Спасибо, что живой.
@alexermakov
4 жыл бұрын
половину видео поражался названию цветов))
@user-qt5eu6lk7t
4 жыл бұрын
*шутка про "шел ## день карантина, на ютуб вернулись сss-шорты "
@pepelsbey
4 жыл бұрын
Ютуб настолько очистился…
@yurkaronin
4 жыл бұрын
Вадим, спасибо за новое видео. Как всегда - доступно объяснили. Не пропадайте пожалуйста.
@jatruadmin
4 жыл бұрын
Есть еще одна важная фишка кастомных свойств: возможность задавать произвольное значение через js и динамически менять его. У нас в чатике владелец сайта может задать произвольный цвет «темы», и, вместо того, чтобы раскладывать по всем зависимым компонентам инлайн-стили с нужным цветом, мы просто меняем значение переменной, а дальше все зависимые компоненты используют эту переменную. Ну и, конечно, это работает динамически: поменял цвет в настройках - виджет сразу перекрасился.
@webmaster5250
4 жыл бұрын
Вот посмотрел видео и только хотел про это написать - и прям с языка снял))) Вадиму респект и уважуха за контент и особенно за его очень понятную подачу!!!
@dmitry.gashko
4 жыл бұрын
Главное, делаеть такие штуки, что бы не было мигания, как на старых сайтах, когда меняешь тему сайта, обновляешь страницу, а сайт сначала мигнул белым, а потом уже темным (это если говорить в общем, не думаю, что такая проблема может быть в случае чатика)
@dmitry.gashko
4 жыл бұрын
Даже больше. Оно работает не в одном направлении (js -> css). Оно также может работает и в обратном направлении (css -> js). То есть, css переменые можно устанавливать внутри css, их там в зависимости ок media и любых других условий можно менять (как и обычные свойства). Но разумеется, когда ее получаешь, то в js берется правильное значение. Таким образом можно реально cделать "custom-properties". Например, может быть какой-то компонент, что рендерится динамически, и при каких-то условиях в css устанавливать, например, --fullScreen: 1, а в js при рендере учитывать это свойства. И это так забавно и необычно выглядит. Еще бы возможность отслеживать их изменения из js (как сейчас можно отслеживать изменения media), было бы вообще круто (вроде не встречал, что сейчас можно), но в некоторых случаях это в общем и не нужно.
@AntonioBenderas
Жыл бұрын
Вадим, как же не хватает твоих этих роликов.
@Andrey_4dev
4 жыл бұрын
Полезное использование кастомных свойств - это темы на сайте. Один раз прописали цвета, один класс и вешаем его через JS для изменения всей расцветки(например, ночная тема).
@maximzabara
4 жыл бұрын
Вадим, спасибо за видео, полезная информация, к размышлению!
@lesyakogivchak8899
4 жыл бұрын
Спасибо! Интересно и доступно, как всегда! ❤️
@Lard25Ukr
4 жыл бұрын
Дякую за відео! Детально, ретельно, просто чудово пояснили :)
@drapasYT
4 жыл бұрын
Наконец-то новые, сверх грамотные и сверх полезные видео. Большое человеческое спасибо!
@lenaryan
4 жыл бұрын
Да лаааадно?..))) Дождались) Ставлю лайк не глядя :)
@pepelsbey
4 жыл бұрын
Тож
@angelinadorasheva5828
4 жыл бұрын
Спасибо, Вадим!! Каждое ваше видео как глоток свежего воздуха! 👍🏻👍🏻👍🏻
@grandehombre
4 жыл бұрын
Огромное спасибо, Вадим! Пишу комментарии категорически редко, но это прекрасное видео!
@papan41k
4 жыл бұрын
прическа отпад)) спасибо за разбор! ждем еще)
@Elisha_GG
2 жыл бұрын
Боже, Вадим, как же вы круто помогаете! Даже спустя год очень актуально
@Kaldaway
4 жыл бұрын
Можно пожалуйста больше видео, от такого приятного человека. Очень не хватает адекватной информации))
@resoursa
4 жыл бұрын
Вот так понятнее, я теперь товарищам буду это видео показывать. А то тенденция использовать технологии ради технологий последнее время повсеместна!
@dmitrygum
4 жыл бұрын
Последнее время?)) Уже лет пять-шесть как есть такой тренд. Ломать то что работает потому что есть что-то новое.
@resoursa
4 жыл бұрын
@@dmitrygum это зависит от возраста :) для меня лет 5 это последнее время :)
@MVZ1983
3 жыл бұрын
спасибо, было интересно
@lelyalelyalelya
4 жыл бұрын
Спасибо за возвращение!!!
@blackbirdchannel-c7b
4 жыл бұрын
Вадим, как всегда, просто красавец.
@aliaksandrk3338
4 жыл бұрын
Я трижды лайк поставил! Спасибо большое, Вадим!
@webstroymaster
4 жыл бұрын
Спасибо! Познавательное видео. Надо нести в массы то как нужно использовать и для чего предназначена та или иная технология.
@michaeldevichenskiy4588
4 жыл бұрын
Еееееее! Я так вам рад! \o/
@user-om1jz6wd4n
4 жыл бұрын
Годнота подъехала Лайк
@mrborodist611
4 жыл бұрын
спасибо за работу, скучал по твоему годному контенту
@redmars3651
4 жыл бұрын
Вадим, запишите пожалуйста видео о favicon'ках. А то уже какой день парюсь, но не могу разобраться в размерах.
@M_E_JI_K_A_I_I_I_K_A
3 жыл бұрын
Лучший канал! Спасибо, Вадим!
@monikossa9964
4 жыл бұрын
Может в следующем видео расскажешь о работе с кастомными свойствами: ограничения, переопределение их в js, вычисления и тд Видео в целом хорошее, но дальше теории оно не ушло увы. Покажи "фишечки" использования кастомных свойств, покажи то что можно сделать только с помощью них. Спасибо
@pepelsbey
4 жыл бұрын
Я для вас 20 минут кодил, а вы только теорию увидели. Ну ладно. Тут просто задача была не фишечки показать, а объяснить разницу между разными «переменными» - я её заявил в начале и выполнил. Когда будет задача углубиться в кастомные свойства (вы её заказали сейчас) - будут фишечки.
@monikossa9964
4 жыл бұрын
@@pepelsbey спасибо
@user-fq8rb9ht5l
4 жыл бұрын
Спасибо, очень интересно и полезно, хочу ещё!
@P1oN4ik
4 жыл бұрын
Ты прекрасно объяснил! Благодарю )
@zoojs
4 жыл бұрын
Очень информативно, спасибо!
@vadimmosoldschool4001
4 жыл бұрын
Спасибо за видео! Было бы еще здорово про custom elements чего-нибудь =3.
@Gellert94
4 жыл бұрын
Ещё не посмотрел, но лайк уже поставил
@xbalya
4 жыл бұрын
Важная особенность кастомных свойств в том, что их значения можно менять на лету на странице, чего не сделаешь с уже собранными из SCSS. При этом, с помощью переменных в SCSS можно задавать сложные математические операции и выставлять логические условия, чего не сделаешь через кастомные свойства. Я к тому, что это все-таки не вкусовщина и просто так расслабиться не получится. Скорее нужно под задачу выбирать инструмент.
@pepelsbey
4 жыл бұрын
Ну я больше про простые переменные и задачи, которые препроцессоры решают лучше. А для кастомных свойств оставить свои специальные задачи и не делать вид, что их можно фолбечить для IE11.
@drino955jug3
11 ай бұрын
а сейчас поддержка для IE почти никому не нужна, и слава Богу@@pepelsbey
@soundmorozov
3 жыл бұрын
Вадим! Спасибо огромное!
@sergeybekharsky6095
4 жыл бұрын
В твиттер-треде проблема-то и была описана довольно чётко: люди хотели бы использовать пользовательские свойства, но их тянет назад необходимость поддерживать что-то старое. Нас столько лет учили, что элегантная деградация дизайна это хорошо, что просто так взять и не использовать пользовательские свойства было бы странно. Если коротко, люди, которым просто нужны переменные для темизации, например, будут продолжать использовать пользовательский свойства как простые переменные. Возможно, мы даже увидим, не знаю, реализацию режима для слабовидящих для государственных сайтов на них. В этом нет ничего плохого.
@pepelsbey
4 жыл бұрын
Я не очень понимаю, зачем людям «хотеть использовать», если не позволяет браузерная поддержка. Это как гриды в IE11 без автоматической раскладки и без гэпов - проще на флексах. А в случае с кастомными свойствами, ещё и путаница и куча ограничений. Если глядя на код, вы не можете сказать, как он работает - это плохой код. Плюс он бессмысленно раздувается - ведь и для новых браузеров достаточно фолбэков, при таком использовании.
@sergeybekharsky6095
4 жыл бұрын
@@pepelsbey я помню тот спор про гриды между Рейчел Эндрю и представителями PostCSS, сейчас ровно такая же ситуация, только гораздо более сглаженная. Мир снова поделится на тех, кто хочет брать максимум от технологии и тех, кому просто нужно "вывести колонку на две строчки". Пользовательские свойства уже бесплатно принесли не-моргающие-темы внутри одного CSS-файла, я всё так же не вижу особой причины отговаривать людей от использования свойств в качестве переменных: эти разработчики получили ровно то, что хотели. Как и ранее - с гридами.
@user-ft3wi4ks9y
4 жыл бұрын
@@pepelsbey Потому что custom properties в связке с javascript хорошо решают задачу темизации в рантайме без генерации отдельных файлов для каждой темы. Ограничения можно прописать через stylelint. Если custom properties с fallback помогают решить какую-то задачу, то почему не использовать их, это всего лишь плюс один инструмент. А когда можно отказаться будет от старых браузеров, тогда можно использовать на полную мощь. Но к примеру задачу темизации даже в современных браузерах нельзя решить пока не будет color functions. Вот пример как это может выглядеть github.com/umputun/remark42/pull/599, плюс плагин для stylelint github.com/Mavrin/stylelint-declaration-use-css-custom-properties
@pepelsbey
4 жыл бұрын
А тебя не смущает, что когда переменные используются плоско и с фолбэком, в коде есть дублирующие кастомные свойства, которые ничего не делают? И тут не помогут оптимизаторы, они-то не знают, как плоско ты их используешь.
@user-ft3wi4ks9y
4 жыл бұрын
Если ты о размере кода, то gzip в легкую с таким справляется. Да, когда смотрю в девтулс есть осадочек, но это как с префиксами. Вообще возможность такого фолбэка показывает крутость сss.
@13oushena
4 жыл бұрын
Спасибо за классный разбор. Еще можно было упомянуть, что к css переменным удобно обращаться через js
@SergiiBespalko
4 жыл бұрын
Супер, мне понравилось
@kirillkvashonin1016
4 жыл бұрын
Вадим, новая прическа огонь!
@elenamazyrina9098
4 жыл бұрын
Вадим, возвращайся чаще!
@dmytrotelish2414
4 жыл бұрын
Да, очень привлекают кастомные свойства, так как в 99.99% использую scss только для переменных и для удобной работы с бэмом &__, &-- . Вот добавили бы в css такую возможность, для работы с БЭМ, то никогда бы и не использовал препроцессоры
@accidentalibi
4 жыл бұрын
Согласен, ещё б точки с запятой и фигурные скобки бы выпилили из CSS - мечта! Боюсь что сейчас будут шуточки что такой синтакцисс называться будет ASS 😂️
@dampadorje
4 жыл бұрын
Я не использую препроцессор для склейки имён классов по БЕМ. Так глобальный поиск сразу нужные стили находит. А если разбивать то приходится листать и в скобках потеряться можно
@get-web
3 жыл бұрын
@@dampadorje Тоже не понимаю смысл это этого амперсанда, сидеть искать переменную, в то время когда к ней можно просто перейти по клику или через ctrl+f найти за секунду
@returnobject
2 жыл бұрын
@@dampadorje да в этом минус препроцессоров. зато пока код пишется все оч удобно))
@michael.manasian
2 жыл бұрын
@@dampadorje а в чем собственно проблема перейти в результирующий файл, полученный из SCSS, и уже там производить поиск?
@mouxez
4 жыл бұрын
Спасибо за видос, полезно
@VYACHESLAVx
4 жыл бұрын
круто, спасибо)
@astrotrain
4 жыл бұрын
Серьга как лого дебиана ((:
@realovich
4 жыл бұрын
Благодарю за видео и расширенное понимание, кастомных css свойств. Использовать не приходилось, так как пользуюсь SCSS и отчасти понимал, что в css эти свойства - не просто переменные. А теперь понимаю, что кое где они мне прям нужны! Спасибо. Вот у меня вопрос в отношении стилизации задизейбленной опции в селекте (select > option[disabled]). Почему она поддаётся стилизации только при наличии пустого атрибута value (value=“”)? Без атрибута и с непустым значением стили не применяются...
@pepelsbey
4 жыл бұрын
Я бы на вашем месте просто оставил бы стилизацию внутренностей селекта. Надёжно, удачно и кроссбраузерно всё равно не получится. Пусть будет нормалный системный.
@kovtunos
4 жыл бұрын
Думаю попробовать custom properties на живом сайте, а для IE задействовать полифил: github.com/nuxodin/ie11CustomProperties. Вроде и наследование и каскад должны с ним работать. Согласен, нет смысла использовать лишь синтаксис без функционала.
@pepelsbey
4 жыл бұрын
Использовать JS-полифил на старом браузере, который скорее всего стоит на старом железе, только ради вашего удобства - это преступление против пользователей.
@ceklon1
4 жыл бұрын
Спасибо огромное!
@user-ep5xt4gg2d
2 жыл бұрын
Не знаю, использую --var и вообще не парюсь с тем, что надо дополнительно что-то устанавливать, прописывать, компилировать и делать другие лишние действия, если по итогу все равно браузер скушает css, а не лесс, сасс и пост. Так же как и не вижу смысла юзать typescript и аналоги. Лучше все уметь делать на максимально нативном коде и никогда не будет проблем.
@egoryurchenko7343
4 жыл бұрын
Лайк, потом гляну)
@Azkett
3 жыл бұрын
Спасибо!)
@germanmalinovsky1719
4 жыл бұрын
Если я правильно понял, тут стоит выбор либо использовать кастомные переменные, если разработка идет под новые браузеры, либо если нужно поддерживать также старые браузеры но вид должен внешний быть в старых и новых браузерах одинаковый, то берем SCSS ₴wow-such-color: moccasin; и забыли про эти кастомные переменные? Или все-таки есть возможность писать код с использованием кастомных переменных с их переопределением не на глобальном уровне и при этом был какой-то полифилл или плагин, который генерирует отдельный css стили для браузеров (как раньше подключался отдельно для IE) которые не поддерживают кастомные переменные?
@pepelsbey
4 жыл бұрын
Адекватных решение по воссозданию поведения кастомных свойств в старых браузерах просто нет. JS-полифилы, которые вам это обещают, я за адекватные решения не считаю.
@user-xg3ik2zg5j
4 жыл бұрын
Все доступно и подробно. Вопрос стоит ли использовать кастомные переменные только backround, color?
@pepelsbey
4 жыл бұрын
Нет конечно, используйте их везде, где вам удобно.
@user-xt3cv7bf3q
4 жыл бұрын
Вадим, а как в CSS обстоят дела с манипуляцией цвета? Дело в том, что переписывая элементарную страничку на SASS я столкнулся с проблемой, что не могу сделать цвет (который задан кастомным свойством), скажем, на 20% более прозрачным или темнее. У sass к примеру есть отличные методы rgba, lighten, darken итд. cssnext когда-то предлагал функцию color(), которая вроде как была в в спецификациях будущего и справлялась с такими задачами (например: color( black, a(20%) )), но потом ее потом переименовали в color-mod(), а потом и вообще убрали из CSSWG. Уж очень нравится твоя идеи использовать только стандартизированные решения, но CSS не справляется даже с такой элементарной задачей. Хотелось бы видеть что-то в духе color( --link-color, a(20%) ), но увы, ничего подобного не нашел. Может я чего-то упускаю и решение проблемы есть?
@pepelsbey
4 жыл бұрын
Нативно - никак, пока функция color-mod (или как она там называется) только проектируется.
@kkulebaev
Жыл бұрын
А какой есть вариант использовать нативные «Кастомные свойства», если хочется использовать их в медиазапросах? Одновременно использовать и препроцессор, и «кастомные свойства»? Или есть вариант получше?
@pepelsbey
Жыл бұрын
Кастомные свойства - это свойства, они могут быть назначены на элементы и оттуда наследоваться по дереву. Так что тут можно только добавить на верхнем уровне переменные (Sass или PostCSS), которые будут раздавать значения для кастомных свойств и использоваться в медиавыражениях. В postcss-preset-env есть трансформация для custom-media, посмотрите там тоже, может подойдёт. github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
@seniordeveloper4775
4 жыл бұрын
Странно что это вызывает вопросы у народа, повально забивают на чтение документации? И мне кажется что css переменные можно использовать и в контексте с препроцессорами если опять таки взглянуть на это под правильным углом. Канал классный, лектор зачетный, хиповая футболка)
@ildaryusupov9637
3 жыл бұрын
Очень интересная тема, но не раскрыта тема когда же все-таки применять эти 3 разные технологии?
@eidenblock
4 жыл бұрын
Вадим, было бы очень интересно посмотреть видео где ты рассказываешь о rem, em, px. Не считаешь ли ты что проблем от использования rem и em больше чем пользы. Спасибо.
@pepelsbey
4 жыл бұрын
Сначала решу для себя, что я об этом думаю - пока не понятно до конца, как раз сейчас вопрос встал для нового сайта «Веб-стандартов».
@zapiski_verstalshika
4 жыл бұрын
ну, мое мнение по поводу переменных в css особо не поменялось... пока остаюсь на less... спасибо за видео)))
@SuhushinAS
4 жыл бұрын
В Less гораздо больше возможностей.
@Battlehater
4 жыл бұрын
@@SuhushinAS Только если статику генерировать. С переменными css можно взаимодействовать из js. Можно применять их внутри css функций типа calc(), и менять их, скажем, в медиа-запросе без необходимости задавать элементу свойство со значением calc заново. Очень мощная штука, если она нужна.
@user-tw6ic2xb8n
4 жыл бұрын
спасибо, дядь. ну и еще, это же можно сложить в комбо и писать со своими привычными переменными sass/less... и юзать еще и новую штуку для более ухищренных штук?
@pepelsbey
4 жыл бұрын
Да легко, главное не перемудрить
@boldureans
4 жыл бұрын
Вадим, спасибо за видео! Скажите пожалуйста, что у вас за тема в VS Code и почему в терминале до сих пор bash$ а не zsh?
@pepelsbey
4 жыл бұрын
Тема GitHub Light, а ценности в zsh никакой не вижу, всё то же самое можно настроить на bash.
@BlagJager
2 жыл бұрын
IE 11 мертв, поэтому уже можно использовать переменные CSS.
@user-hb4pt4jv9q
4 жыл бұрын
Спасибо, отличное видео, но есть один нюанс kzitem.info/news/bejne/z5iEmGavqneYgGU - не надо было полностью удалять модификаторы, т.к. фон у .card-set будет работать в старых браузерах
@pepelsbey
4 жыл бұрын
Согласен, увлёкся немного, но фон там был не главным
@immortal-som
4 жыл бұрын
Хорошо что я перед комментированием гляжу отписали ли об этом другие.
@user-vu7oy1ii3y
4 жыл бұрын
Топ ❤️ ❤️ ❤️
@erisnuts
4 жыл бұрын
спасибо!
@antonnemtsev6473
4 жыл бұрын
Спасибо за видео. Разделяю твою точку зрения. Что то я так и не смог понять весь этот балаган в твиттере.
@dmytrohrychaniuk6556
4 жыл бұрын
Спасибо, полезно) Полезно ли держать в scss переменных подключение custom prop.? Типа ₴brand-color: var(-brand-color);
@pepelsbey
4 жыл бұрын
Честно говоря, не вижу причин. Это какой у вас препроцессор гривны использует для обозначения переменных? :)
@Gellert94
4 жыл бұрын
Вадим, а уточните, пожалуйста, про ваш пример с `.card-set--green/blue`. У нас есть отдельный блок `card-set`, есть отдельный блок `card`. По вашему примеру получается неявная связь между двумя независимыми блоками. Почему-то блок `card-set` внезапно узнает, что внутри карточки есть какие-то `fill`, `animal` и т.д., хотя его дело - только построить сетку для набора элементов, а что у элемента внутри ему всё равно. Или в данном случае это просто в угоду демонстрирования функционала и придираться не стоит?
@pepelsbey
4 жыл бұрын
100% БЭМа не бывает - цвет текста всё равно наследуется вглубь, как и размер шрифта. С этим ничего не поделаешь и этим можно пользоваться. Если ради кристалльно чистого БЭМа вы не используете кастомные свойства - это печально. Или вы видите, как это можно совместить?
@Gellert94
4 жыл бұрын
@@pepelsbey по идее, можно перенести модификаторы цвета на саму карточку. В голом html, конечно, ручками утомишься раздавать модификаторы, но если используется шаблонизатор или фреймворк, то это упрощает задачу.
@pepelsbey
4 жыл бұрын
Но вы же без проблем задаёте для body (или какой у вас там корневой элемент) что-то вроде font-family, color или что-нибудь ещё. Вряд ли вы в каждом блоке пишете font-family для полной независимости. А если пишете, то очень зря. Тут то же самое - свойства наследуются, это суть работы стилей в браузере и не пользоваться этим будет странно, слишком уж мощный инструмент.
@Gellert94
4 жыл бұрын
@@pepelsbey всё так, задаём для body font-family и другое. Понял, спасибо за ответы!
@trampsport
4 жыл бұрын
почему карточки именно через article? они же не отдельный элемент,а имеют прямое отношение к товарной группе?
@pepelsbey
4 жыл бұрын
здесь потому, что это единица контента, которую можно взять из этой группы и использовать где-нибудь ещё.
@user-zi8le4nm4d
4 жыл бұрын
@@pepelsbey А почему эти карточки не в списке?) Вроде бы логично их обернуть в неупорядоченный список, нет? Да, я понимаю, что видео не об этом, но просто мои представления о правильной разметке рушатся)
@jorgenUA
4 жыл бұрын
жаль, что редко про вёрстку рассказываешь...
@pepelsbey
4 жыл бұрын
Будет чаще!
@ManyakNag
4 жыл бұрын
Чтобы пользоваться кастомными свойствами надо просто начать их использовать, а дальше уже научишься использовать их на всю мощь. Так что я за то, что, пусть сначала будут попытки использовать кастомные свойства как переменные.
@pepelsbey
4 жыл бұрын
Полностью согласен. Но с небольшим нюансом: нужно понимать, что происходит. То есть я даже готов сказать следующее: можно вообще всё, если ты понимаешь, зачем это, как оно работает и твой выбор осознанный. Это видео скорее было обращено к тем, кто решил писать современный CSS и просто перешёл с одних переменных на другие.
@user-cp5rd1pp3j
2 жыл бұрын
Надо было писать в pre.css и компилировать в post.css :)
Можно не по теме? Насколько оправдано использование здесь article, вместо списка?
@pepelsbey
4 жыл бұрын
Почему вместо? Article - это единица информации, то что можно как-то выделить и назвать заголовком. Самое то для карточки товара, тизера статьи или вроде того. Меня как раз смущает заголовок прямо в списке. Сюда можно было бы добавить список, ведь это перечисление подобных элементов. Но я не стал, это не кажется очень критичным.
@_kie
4 жыл бұрын
@@pepelsbey нет, я не про критичность. Мне казалось, что article по семантике про большие объёмы информации - статья, пост и т.д.
@pepelsbey
4 жыл бұрын
Нет, это распространённая ошибка среди русскоязычных фронтендеров: все переводят article как «статья», хотя это всего лишь одно значение этого слова. Другое - единица (информации), см. слово «артикул».
@Jay-pp4pk
4 жыл бұрын
Спасибо за видео. Кто-то смотрит статистику посещения сайта? Зачем поддерживать ie11?)
@pepelsbey
4 жыл бұрын
У Оли из подкаста «Веб-стандарты» 6% IE11 на проекте, тут просто не отмахнёшься (
@user-wc9ts5wh7p
4 жыл бұрын
Вадим и в целом сообщество, как делать таблицы с большим количеством данных с фиксированной шапкой и колонками? для меня это каждый раз боль, но мы вынуждены использовать это повсеместно. хочется нативную вирутуалиазацию с динамической высотой строки, не знаю правда насколько это реально, но в любом случае интересно как решаете этот трабл Вы
@pepelsbey
4 жыл бұрын
Мне эту задачу решать не приходилось, но тут недавно была хорошая статья adrianroselli.com/2020/01/fixed-table-headers.html
@dimovich85
4 жыл бұрын
post.css - огонь!))
@JyotishProject
4 жыл бұрын
Получается с фоллбэчиться на ie можно без post-css, сразу на лету указывая через запятую фоллбэк ?
@pepelsbey
4 жыл бұрын
Нет, в IE11 без PostCSS фолбеки не появятся
@pilot_bbk
4 жыл бұрын
я помню, что уже спрашивали на стриме, но не нашел с ходу. Что за редактор?
@pepelsbey
4 жыл бұрын
VS Code, шрифт JetBrains Mono, тема GitHub Light
@interceptorlt1268
4 жыл бұрын
А возможно ли в sass использовать css-переменные чтоб и в IE11 заработало? Судя по всему, fallback в виде второго значения для var() не срабатывает
@pepelsbey
4 жыл бұрын
Чисто синтаксически, Sass работает с кастомными свойствами, но зависит от того, как именно вы их хотите заставить работать в IE11.
@michaeldeoz
4 жыл бұрын
а есть ли какой-то способ кастомизировать input type=date ?
@pepelsbey
4 жыл бұрын
Пока нет, но есть планы github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ControlUICustomization/explainer.md
@jackjameson6826
4 жыл бұрын
С CSS-переменными есть один неприятный кейс - они не работают в медиа-запросах :(
@pepelsbey
4 жыл бұрын
Да, потому, что это кастомные свойства - а свойства применяются к элементам в селекторах.
@meg6pat
4 жыл бұрын
Футболка в этот раз не понравилась, когда псевдорукописный шрифт повторяется (2 буквы S), это сразу бросается в глаза. Само видео огонь.
@pepelsbey
4 жыл бұрын
Извините, найду футболку получше!
@egoist2956
4 жыл бұрын
Лайк
@alxndrboev
4 жыл бұрын
А что это за прога с символами эмоджи и прочими на 5:40?
@pepelsbey
4 жыл бұрын
Это встроенный в macOS диалог, открывается по Ctrl Cmd Space
@sowa9340
4 жыл бұрын
А что у вас за шрифт в vscode?
@pepelsbey
4 жыл бұрын
JetBrains Mono
@STEVE-ik5rz
4 жыл бұрын
Вадим, слишком близко =)
@pepelsbey
4 жыл бұрын
Привыйкайте, теперь будет так :) Студия небольшая, а объектив шире 15мм уже ставить не стоит.
@jatruadmin
4 жыл бұрын
@@pepelsbey надо минимум 1,5 метра от камеры, социальное дистанцирование же
@PacoOfficial
3 жыл бұрын
а что, щас стало модно называть index.css вместо style.css ?
@pepelsbey
3 жыл бұрын
Считайте, что я придумал :) Ну а чего: index.html давно с нами, index.js появился для Node.js, пришла очередь index.css
@kalach2010
4 жыл бұрын
А ты знаешь, что ты можешь запускать пакеты через npx и при этом не устанавливать их? :)
@pepelsbey
4 жыл бұрын
Знаю, пробовал для простоты, но там есть нюансы. Например, пакет postcss-cli ставится как postcss, а плагин postcss-custom-properties сам не запускается, но указывается параметром для postcss, а npx про него ничего не знает. Так что проще (и быстрее для запуска) было установить всё нужное.
@Nerossoul
4 жыл бұрын
Смотрел и думал: а цвета из головы или из шпоргалки? Хочу думать что из головы! не переубеждайте меня пожалуйста. :-)
@pepelsbey
4 жыл бұрын
Из головы конечно! (не переубеждаю)
@dimovich85
4 жыл бұрын
Ты на память все цвета знаешь?
@pepelsbey
4 жыл бұрын
С десяток помню, остальное - монтаж :D
@dimovich85
4 жыл бұрын
@@pepelsbey you 🤘
@lionstar3189
4 жыл бұрын
всегда думал что autoprefixer и есть post css.
@pepelsbey
4 жыл бұрын
PostCSS это как Gulp - система запуска плагинов, автопрефиксер один из них
Пікірлер: 161