Б
Афтер и бефор можно еще, но это тоже самое по факту
а это изящнее чем добавлять блоки, сенкс
Size: a a a
2020 April 15
АЧ
Почему здесь (в конце страницы) голубые кнопки "прыгают"?
ИЛ
тогда меню будет не до конца темным
Хм, можешь песочек сделать?
Кm
Потому что так сверстано
А стили то где можно увидеть?
А стили то где можно увидеть?
Б
Хм, можешь песочек сделать?
АЧ
Потому что так сверстано
А стили то где можно увидеть?
А стили то где можно увидеть?
SB
@kezov лови кудосы
SB
Примерно каждый день у людей всплывают вопросы вида: “А у input есть псевдоэлементы? А как стилизовать плейсхолдер? А как поменять стили стандартного видеоплеера?”
Ответ на эти вопросы — теневое дерево документа, Shadow DOM.
Что лучше всего умеет браузер? Правильно, оперировать блоками (даже не текстом, но об этом потом). Так зачем придумывать что-то новое, если можно сымитировать нужное поведение старыми добрыми div-ами, а саму реализацию скрыть от конечного пользователя. Это, конечно, очень грубое определение теневого дерева документа, но весьма точно отражающее суть.
Теперь перейдём к делу. В CSS-чате заметили, что Safari для элементов формы с плейсхолдером показывает в инспекторе два вложенных в input (!) div-а. Один это собственно плейсхолдер, а второй — contenteditable, т. е. непосредственно ввод данных. И если щёлкнуть на каждый, можно вполне себе получить нужные селекторы (см. тред: https://twitter.com/zavsievich/status/1250338154835410946?s=21).
Тем временем не все знают как такого же достичь в Chrome, но на самом деле всё просто: открываем инспектор, в верхнем правом углу меню (три точки), в нём — Settings -> Elements -> Show user agent shadow DOM. А для Firefox: идём в about:config и включаем флаг devtools.inspector.showUserAgentShadowRoots
И всё, получаем ровно тот же эффект, теперь стилизация видеоплеера или элементов форм (позволяющих это сделать) не будет проблемой, а статьи перестанут казаться магией.
Ответ на эти вопросы — теневое дерево документа, Shadow DOM.
Что лучше всего умеет браузер? Правильно, оперировать блоками (даже не текстом, но об этом потом). Так зачем придумывать что-то новое, если можно сымитировать нужное поведение старыми добрыми div-ами, а саму реализацию скрыть от конечного пользователя. Это, конечно, очень грубое определение теневого дерева документа, но весьма точно отражающее суть.
Теперь перейдём к делу. В CSS-чате заметили, что Safari для элементов формы с плейсхолдером показывает в инспекторе два вложенных в input (!) div-а. Один это собственно плейсхолдер, а второй — contenteditable, т. е. непосредственно ввод данных. И если щёлкнуть на каждый, можно вполне себе получить нужные селекторы (см. тред: https://twitter.com/zavsievich/status/1250338154835410946?s=21).
Тем временем не все знают как такого же достичь в Chrome, но на самом деле всё просто: открываем инспектор, в верхнем правом углу меню (три точки), в нём — Settings -> Elements -> Show user agent shadow DOM. А для Firefox: идём в about:config и включаем флаг devtools.inspector.showUserAgentShadowRoots
И всё, получаем ровно тот же эффект, теперь стилизация видеоплеера или элементов форм (позволяющих это сделать) не будет проблемой, а статьи перестанут казаться магией.
ИЛ
Та вроде норма все. Если мейн контейнеру задать бекграунд белый
Б
Та вроде норма все. Если мейн контейнеру задать бекграунд белый
неа, не норм, я специально потому что правая сторона тоже закраситься в белый, а нужно что бы она темной оставалась
ИЛ
неа, не норм, я специально потому что правая сторона тоже закраситься в белый, а нужно что бы она темной оставалась
Ну правой задать уже свой бг
ИЛ
И будет тогда как и хотели. Без лишних элементов в доме
Б
Ну правой задать уже свой бг
а можно в песочнице показать, а то я не понял пока как это сделать?
ИЛ
Простите, но кодепен с планшета говнище у меня.
Б
Простите, но кодепен с планшета говнище у меня.
та да, ничего не понятно )))
ИЛ
та да, ничего не понятно )))
Ну сам вид какой нужен, или нет?
ИЛ
По размеру лого цвет растянуть можно, например, паддингами