Accent-color - CSS свойство, которое не смогло 🙅🏻♂️.
В многих видео о свойстве accent-color, твердят, что это новый и легкий способ стилизации элементов формы: input type=”checkbox”, input type=”radio”, input type=”range”, progress в CSS. И нам можно забыть про трюки с тем чтобы прятать нативные элементы и вместо них отрисовывать кастомные на псевдоэлементах как мы это делали ранее в CSS.
Проведем полный разбор этого свойства и заглянем в различные браузеры. Посмотрим как оно сочетается с CSS color-scheme и @media (prefers-color-scheme: dark) и как это может сделать наш код доступней и приятней для пользователя.
Посмотрим как сделать другие элементы формы: button, fieldset, label, input type="text" в единой цветовой палитре сайта.
Вы увидите как переключить тему в Chrome - не меняя саму тему, чтобы увидеть разницу в примененном @media (prefers-color-scheme: dark).
Ссылки на ресурсы:
https://www.w3.org/TR/css-ui-4/#widge...,
https://accent-color.glitch.me/,
https://caniuse.com/?search=accent-color
0:00 accent-color - Основы
1:07 Chrome, Safari и Mozilla
1:41 Возможны значения
1:58 accent-color и светлый цвет
2:41 accent-color и цвета
3:50 Пользовательские темы
6:55 Chrome и смена темы
7:43 А как же другие элементы формы?
8:36 Итог
#css #html #web #webdevelopment #frontend #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🛩 Telegram - https://t.me/web_education_new
CSS keywords: inherit, initial, unset, revert, all 👉 • CSS keywords: inherit, initial, unset... ✍️
CSS text-stroke, text-fill-color и paint-order 👉 • -webkit-text-stroke, -webkit-text-fil... ✍️
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DP... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы ... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используе... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, v... ✍️
Watch video Accent-color - CSS свойство, которое не смогло 🙅🏻♂️. online without registration, duration hours minute second in high quality. This video was added by user Maksym Fariga 13 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 198 once and liked it 15 people.