Кастомные свойства - HTML Шорты
ฝัง
- เผยแพร่เมื่อ 30 พ.ค. 2017
- - Why variables in CSS are harmful, Берт Бос - www.w3.org/People/Bos/CSS-var...
- Пользовательские свойства CSS. Основы - zmeika.name/2017/03/02/custom-...
- It’s Time To Start Using CSS Custom Properties, Сергей Господарец - www.smashingmagazine.com/2017...
- Гибкая настройка внешнего вида выдачи Яндекса, Руслан Муфтиев - events.yandex.ru/lib/talks/4265/
Ближайшие интенсивы:
- «HTML и CSS, уровень 1» - htmlacademy.ru/intensive/htmlcss
- «HTML и CSS, уровень 2» - htmlacademy.ru/intensive/adap...
- «JavaScript, уровень 1» - htmlacademy.ru/intensive/java...
- «JavaScript, уровень 2» - htmlacademy.ru/intensive/ecma...
- «JavaScript, уровень 3» - htmlacademy.ru/intensive/react
- профессия «Фронтенд разработчик» - htmlacademy.ru/profession/fro...
- профессия «React-разработчик» - htmlacademy.ru/profession/react
- «Node.js, уровень 1» - htmlacademy.ru/intensive/nodejs
- «PHP, уровень 1» - htmlacademy.ru/intensive/php
- «PHP, уровень 2» - htmlacademy.ru/intensive/php2
По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87
Спасибо,за очередное интересное и познавательное видео.Есть стимул погружаться всё глубже в изучение html и css)Жду новых выпусков!)
Спасибо! Теперь буду чуть больше понимать подкаст)
HTML Шорты - отличная рубрика. Спасибо!
Молодчина! И даже не поленился приатачить ссылки.
За этот шорт огромное спасибо!
"Но уже пришло время пробовать и уметь." - Спасибо! Будем пробовать.:)))
Спасибо. Очень интересно!!!
было бы очень интересно услышать ответ на вопрос в одном из следующих выпусков: как правильно и рационально использовать блоки-врапперы в HTML-файлах. часто просматриваю код сайтов (особенно это касается CMS), и недоумеваю: зачем так много лишних блоков. официальная документация html довольно сложна, и найти ответ на этот вопрос мне очень сложно.
Спасибо за вопрос, разберём
Да, это очень актуальный вопрос для начинающих. На интенсивах и курсах Академии всевозможные обёртки используются повсеместно, но какие базовые принципы лежат за этим прямо не объясняется, а новичку сходу понять и разобраться в этом непросто.
Вижу новое виде - ставлю лайк
спасибо за очередное полезное видео) узнала много нового, захотелось познакомиться с этим интересным зверем поподробнее))
Спасибо!
Классная футболка в каждом выпуске)))
Скоро футболки начнут кончаться! Но пока есть запас.
Пока не понял о чем это,
но спасибо.
Расскажите пожалуйста про заголовки - . Можно ли использовать несколько на странице? В примерах спецификации много, но меня не покидает сомнения, что я где-то читал о том, что может быть только один.
Расскажем и очень скоро 👀
В случае, если я хочу хранить все переменные в одном файле, а использовать в другом (склеивая их после иди просто импортируя), то как узнать, что кастомное свойство «почему-то не было объявлено» заранее? Никак? Получается, нужно всё равно препроцессить по прежним правилам, чтобы они подставлялись сами в виде фолбэков?
Андрей Гурылёв нужно просто писать компоненты (как и функции в программировании) с дефолтным значениями.
При создании меню в виде списка ссылок (`ul>li>a`) часто возникает неоднозначность: какие классы вешать на элементы списка `li`, а какие - на ссылки `a`? Расскажите про это, пожалуйста. :)
Всё зависит от задачи и ситуации) Если, например, этот список - действительно текстовый список (и ссылки в нём тоже inline-), можно ограничиться только `a`. В общем случае, думаю, расположение и позиционирование - на `li`, украшательства - на `a`. Но опять же, цели могут быть очень разные
Спасибо за вопрос
При создании отступов между родительским элементом и его дочерними элементами в каких случаях надо использовать padding'и у родителя, а в каких - margin'ы у его дочерних элементов? При расположении двух элементов относительно друг друга какому из них выставлять margin: левому/верхнему или правому/нижнему?
Попробуем разобрать этот вопрос в будущих выпусках, спасибо
Накопил сразу несколько вопросов:
1) В чем семантическое отличие тегов menu и nav и как их правильно применять?
2) Часто встраиваю контентные изображения бэкграундом в инлайновые стили из-за очень удобных свойств background-size: cover/contain. Насколько правильно с точки зрения семантики использовать такой метод учитывая что нельзя прописать атрибут alt
Спасибо за вопросы, расскажем
nav - только для основного блока навигации должен применяться (www.w3schools.com/tags/tag_nav.asp). А menu - это кастомные менюхи в веб-приложениях, возможное переопределение контекстного меню, наборы кастомных команд и все такое (www.w3schools.com/tags/tag_menu.asp)
Я не использую препроцессоры. Попробывал - уж слишком много мусора генерируют
Чем больше будет динамики в CSS, тем больше он будет похож на язык программирования. Т.е. уходя от JS приходим к извращенному JS. Это общая проблема концепции универсализации.
Вещь хорошая, но увы, IE, их не поддерживает. И Edge до 15й версии тоже а в 15 указан частичный саппорт с багами. Что делать? Забить на совместимость с IE, или делать 2 версии сайта?
Андрей Францев об этом в самом конце ролика: полной поддержки пока нет, но знать и уметь уже вполне можно. В видео по ссылке в описании рассказано, как их уже использует Яндекс.
Забить. Я забил. ))
Все мои эксперименты с Edge 15 и кастомными свойствами прошли гладко, а я делал сложные штуки.
можно использовать полифилы - файлы стилей будут взяты из кеша и на них применить маппинг переменных из js. будет фликеринг, но пользователям ИЕ не привыкать к странному интернету
Artem Riasnianskyi они и не вкурсе, что интернет вообще нормальный. :D
Расскажите про необязательные HTML-теги, которые гугл (в своем styleguide) рекомендует не использовать. Думаю многие даже не знают точно какие теги являются необязательными, но лично меня больше интересует какие плюсы это дает и стоит ли слушать умельцев из гугла?
Спасибо за интересный вопрос, расскажем
HTML Academy мне тоже интересно!
Предположу, что и препроцессоры не будут стоять на месте, будут появляться всё новые, с новыми классными плюшками. При таком раскладе препроцессоры все равно будут находиться на один шаг впереди перед нативным CSS.
Как вы считаете?
Никто не мешает комбинировать. Например, использовать PostCSS, чтобы использовать необходимые плюшки от препроцессоров, но при этом не сильно завязываться на их синтаксис.
Мне кажется вы не внимательно смотрели, ПРЕпроцессоры на то и ПРЕ, что после того как стили собрали, о них можно забыть. О какой шаге впереди идет речь? Только нативная поддержка дает динамику изменений "после сборки"
Почему, если речь идёт о крупных проектах, то само собой полагается, что в них должен присутствовать препроцессор стилей? В чём удобства препроцессоров для типичной средней команды разработки (когда рефактор никто не оплачивает, когда никто особо не пишет доку, и так далее)?
Dmitry Anderson главным образом, переменные с цветами и организация модульности.
сколько не видел таких проектов - цвета были в сплошном бардаке, т.к. и по оттенку разбросаны (хорошо хоть в одном файле были), и называл кто как мог, и ещё ряд проблем. А про модульность что конкретно имелось в виду?
Я лично в таких проектах видел только проблемы, т.к. люди писали вложенностями и часто глядя в середину или конец большого компонента не очень понятно что такое: .item { display: block }. И чтобы в голове отрезолвить такое, приходилось подыматься вверх на уровней 4-5 точно и компилировать в уме. В общем то честно, никогда не видел преимуществ в использовании препроцессоров в больших проектах. Возможно дело в текучке людей на тех проектах, возможно ещё в чём-то, но определённо хотелось услышать мнение кого-то, кто работал в команде на стилевых препроцессорах.
Спасибо.
Активно используем у себя препроцессоры. Если писать придерживаясь какой либо методологии то все просто замечательно. Например у нас БЭМ. Стили разбиты по файлам по имени Блоков (компоненты), отдельно вынесены цвета, отдельно типографика. Стили для мобильных так же отделены от десктопных.
Но что бы все было так радужно нам пришлось:
1. Согласовать для всех верстальщиков структуру папок и файлов при разработке.
2. Стайлгайд написания стилей ( элементарные вещи типа максимальной глубины вложенности, именования переменных и тд и тп )
Ну вот на то, что вам "пришлось" не везде есть время к сожалению :(
Dmitry Anderson ну не сказал бы что много времени надо. Сначало обсудили базовые вещи + решили использовать БЭМ. Я за пару вечеров написал простой набор тасков для галпа. А потом от проекта к проекту стайлгайд обрастал подробностями + появилось много нюансов уже прописанных заранее.
На принте Мохнатая гора IE, не иначе)
Очень жаль, что нельзя использовать переменные в медиа квери
Есть уже черновик, который позволяет писать специальный переменные для медиавыражений.
гриды!!! о гридах давайте
Ребята, есть такое пожелание - разделяйте как-то новые с пылу с жару фичи от тех, которые уже сейчас можно широко использовать. Иначе получается каша "обо всём интересном на свете", и это реально путает.
Мы явно говорим, что можно использовать, а что пока нет. Но всё очень зависит от проекта: для каких-нибудь админок внутри компании, где все на Safari и Chrome - почему бы и нет. Если будем рассказывать про фичи со 100% поддержкой в IE9, то будет очень скучно.
Трудно понимать видео с обилием этих терминов, особенно новичку. Желательно сделать какую-нибудь статью или список с кратким пояснением всех терминов которые будут встречать в процессе обучения. А также лучше адаптировать шорты под письменный язык когда выкладываете их на сайт как статьи. Ещё труднее понимать когда читаешь разговорный язык.
Не кастомные, а пользовательские свойства. Язык свой не стоит забывать.
кАстомный
Сколько реально зарабатывает программист th-cam.com/video/7DKYyX-lVf4/w-d-xo.html