#заметка дня
#shadowdom #css #input
Тема дня — надоедливые иконки в полях ввода.
Я надеюсь, все помнят заметку о Shadow DOM и как с ней работать. Если нет, вот ссылка: https://xn--r1a.website/htmlshit/384
Суть проблемы в том, что Chrome начал активно обновлять свой набор полей ввода и практически реализовал все доступные в спецификации. Firefox и Safari пока сильно отстают, но разработчики, как правило, используют правильные типы полей и вешают альтернативные решения.
В последних обновлениях появились иконки часов и календаря в соответствующих полях. Естественно, это сразу не устроило тех, кто оформлял поля самостоятельно. А как их убрать? Секрет снова в Shadow DOM. Читаем статью выше, идём в средства разработчика и быстро получаем решение (см. иллюстрацию и пример):
https://codepen.io/alinaki/pen/yLOVoXe
Надеюсь, скоро подтянутся и остальные браузеры и пример можно будет дополнить.
#shadowdom #css #input
Тема дня — надоедливые иконки в полях ввода.
Я надеюсь, все помнят заметку о Shadow DOM и как с ней работать. Если нет, вот ссылка: https://xn--r1a.website/htmlshit/384
Суть проблемы в том, что Chrome начал активно обновлять свой набор полей ввода и практически реализовал все доступные в спецификации. Firefox и Safari пока сильно отстают, но разработчики, как правило, используют правильные типы полей и вешают альтернативные решения.
В последних обновлениях появились иконки часов и календаря в соответствующих полях. Естественно, это сразу не устроило тех, кто оформлял поля самостоятельно. А как их убрать? Секрет снова в Shadow DOM. Читаем статью выше, идём в средства разработчика и быстро получаем решение (см. иллюстрацию и пример):
https://codepen.io/alinaki/pen/yLOVoXe
Надеюсь, скоро подтянутся и остальные браузеры и пример можно будет дополнить.
#заметка дня
#html #shadowDOM #chrome
Продолжаю эксплуатировать тему Shadow DOM.
Многим, возможно, известно, что в какой-то момент развития HTML разработчики браузеров и стандартов решили, что HTML должен описывать не только структуру, но и внешний вид документа. Так появились теги font, marquee, center, strike, listing, dir, menu.
Но дело-то в том, что для тега marquee — бегущей строки — не было предложено никакой альтернативы. Предполагалось, что бегущая строка (или контент вообще) будет добавлена в CSS, но этого не произошло. В итоге нам приходится выдумывать комбинацию из transform translate или ключевых кадров. Не без проблем.
Каким же удивлением стало для меня, что тег marquee вполне себе развивается! В движке Blink (Google Chrome) его переписали на Shadow DOM и забавно смотреть на внутренние поддерживаемые правила CSS.
Вообще, marquee тег довольно полезный (взгляните на интерфейсы, ограниченные по ширине), наряду с тегами для воспроизведения звука и видео, но я бы предпочёл уже чтобы стандартизирующие службы и разработчики браузеров определились с его статусом или ввели бы CSS-правило.
Страница на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
Пример (взят, собственно, с MDN):
https://codepen.io/alinaki/pen/dypdMEr
P. S. приятно видеть, что сообщество людей, которым интересен мой канал, растёт. Некоторые из них имеют свои каналы или только начинают. Поддержим же один из новеньких: https://xn--r1a.website/sharknessIT и посмотрим за его развитием.
#html #shadowDOM #chrome
Продолжаю эксплуатировать тему Shadow DOM.
Многим, возможно, известно, что в какой-то момент развития HTML разработчики браузеров и стандартов решили, что HTML должен описывать не только структуру, но и внешний вид документа. Так появились теги font, marquee, center, strike, listing, dir, menu.
Но дело-то в том, что для тега marquee — бегущей строки — не было предложено никакой альтернативы. Предполагалось, что бегущая строка (или контент вообще) будет добавлена в CSS, но этого не произошло. В итоге нам приходится выдумывать комбинацию из transform translate или ключевых кадров. Не без проблем.
Каким же удивлением стало для меня, что тег marquee вполне себе развивается! В движке Blink (Google Chrome) его переписали на Shadow DOM и забавно смотреть на внутренние поддерживаемые правила CSS.
Вообще, marquee тег довольно полезный (взгляните на интерфейсы, ограниченные по ширине), наряду с тегами для воспроизведения звука и видео, но я бы предпочёл уже чтобы стандартизирующие службы и разработчики браузеров определились с его статусом или ввели бы CSS-правило.
Страница на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
Пример (взят, собственно, с MDN):
https://codepen.io/alinaki/pen/dypdMEr
P. S. приятно видеть, что сообщество людей, которым интересен мой канал, растёт. Некоторые из них имеют свои каналы или только начинают. Поддержим же один из новеньких: https://xn--r1a.website/sharknessIT и посмотрим за его развитием.
MDN Web Docs
<marquee> HTML marquee element - HTML | MDN
The <marquee> HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.