​​Примерно каждый день у людей всплывают вопросы вида: “А у 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

И всё, получаем ровно тот же эффект, теперь стилизация видеоплеера или элементов форм (позволяющих это сделать) не будет проблемой, а статьи перестанут казаться магией.

Шлём спасибо в @css_ru и @nedofront.

​​Тем временем я прошёл испытательный срок. Полгода это вам не шутки, трижды поваленный продакшен — тем более.

Принимаю поздравления.

#статья дня
#css #flex #facebook

Ahmad Shadeed выложил статью в которой разобрал CSS обновлённого Facebook: https://ishadeed.com/article/new-facebook-css/, есть в переводе на Хабре: https://habr.com/ru/company/ruvds/blog/496958/

Конечно, некоторая часть выложенного это, скорее, хаки, если даже не издевательство над здравым смыслом. Хорошо видно, что работают разные команды. Впрочем, хорошие дизайн-решения тоже есть.

Но одинг момент конкретно так меня покоробил. Это укладка flexbox-сеток.

Я не знаю по какой причине они это сделали, но они решили классическую проблему space-between на недостаточном числе элементов… добавлением пустых элементов. То есть, фактически, добиванием сетки до кратного числа блоков чтобы избежать широких промежутков.

На самом же деле достаточно было либо блока, либо псевдо-элемента со следующими правилами:

.wrapper::after {
 content: ‘’;
 flex-grow: 1;
}

Грубо говоря, установить распорку.

Думаю, знать простые решения тоже необходимо. Как и уметь считать 🙂

#видео дня
#css #html #spec #validation

Вадим Макеев недавно представил новый доклад: “HTML: the good parts” и буквально отобрал у меня половину будущих тем для описания. Но, так или иначе, формат видео заходит не всем, а в CSS-чате опять всплыла одна из типичнейших проблем начинающих верстальщиков под кодовым названием p>ul. Поэтому, самое время положить это видео и сюда, for the future good. Да, долго. Но стоит каждой минуты.

https://www.youtube.com/watch?v=A4tglcel7Ac

#font #bug

Недавно ко мне постучался косматый геолог и глядя на Chrome 81 в macOS X он усмехнулся мне.

Он рассказал, что то font-weight перестал работать на заголовках и заказчик очень недоволен, но, например, на моей машине в Chrome 80 это не повторилось.

Причина же в следующем: перед выпуском Chrome 81 обнаружился баг (https://bugs.chromium.org/p/chromium/issues/detail?id=1057654), а команда Chrome посчитала его не блокирующим выпуск.

Суть же бага в том, что свойство font-weight перестало применяться к шрифтам system-ui и BlinkMacSystemFont кеглем больше 16px. Такой себе незначительный косяк, портящий буквально все заголовки.

Так или иначе, проблему скоро решат, а вам пока стоит удалить эти шрифты из указания семейства в стилях.

​​Несколько месяцев назад ехал в поезде “Ласточка” и подключился к РЖД Wi-Fi. У них был простая, но милая анимация загрузки страниц.

Спустя некоторое время вспомнил о ней и решил повторить, по-моему, вышло неплохо. Не так часто можно повторить весь школьный курс тригонометрии в одном лишь загрузчике.

https://codepen.io/alinaki/pen/GbxrwO

Вот так вот ноябре 2011 года мы занимались адаптивной вёрсткой.

Три устройства, три разных платформы. Android, webOS и iOS.

И на всех трёх — браузеры, основанные на WebKit.

Как видим, проблемы на Android были всегда.

#инструмент дня

#svg #path

Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.

Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.

https://svg-path-visualizer.netlify.app/

Немного не по теме канала, конечно, но пригодится в тот или иной момент жизни всем.

Вот так вот делать не надо. Никогда.

Пока вы спали, в #IE11 на основе проприетарного свойства runtimeStyle научились практически полноценно полифиллить пользовательские свойства:

https://twitter.com/jon_neal/status/1263071983811641345

А самое главное, что Джонатан Нил —  заметный участник PostCSS-сообщества (Jonathan Neal, @jon_neal в Twitter) и, возможно, это всё будет реализовано в связке с PostCSS.

Пока же лучшее, что мы имеем, это :
https://github.com/nuxodin/ie11CustomProperties

Тоже весьма хорошее решение.

#фишка дня
#заметка #html #markup #layout #phone

Если Microsoft Edge по какой-то причине решил, что ваш набор цифр в блоке — это номер телефона и подсветил синим, помогает следующий атрибут:
x-ms-format-detection="none”.

Да, не по стандарту. В лучших традициях старорежимной Microsoft.

#ссылка дня
#android

Кто сегодня чувствует себя тупым, как я, например, может посмотреть этот прекрасный коммит:

https://android-review.googlesource.com/c/platform/frameworks/base/+/1321016/1/packages/SystemUI/src/com/android/systemui/glwallpaper/ImageProcessHelper.java

Что он делает? Он исправляет циклическую перезагрузку при установке этой картинки на обои:

https://drive.google.com/file/d/11rxzYvPcIOh_8GvS4XSC3YtbW3CecE-O/view

Все ошибаются. Не надо хандрить лишний раз. Даже если ты и правда тупой (или разработчик Android).

#фишка дня
#ide #vscode #sublime #editor #редактор

Sublime Text, в отличие от Visual Studio Code, не пытается сразу форматировать ваш текст при вставке. Я считаю, что это хорошо, потому что в VS Code и Atom, во всяком случае раньше, алгоритм расчёта отступов при вставке был отвратный.

Но нюанс в том, что в Sublime Text тоже встроена такая возможность. Включается зажатием Shift: ctrl-shift-v. И текст встаёт красиво.

Кидайте в комментарии существующие решения проблемы для VS Code. Лично я давно забил на это — мой код форматируется Prettier+ESLint при сохранении.

#ссылка дня
#типографика

Итак, запоздалые, но хорошие новости для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.

Александра Королькова выложила в бесплатный доступ свою книгу “Живая типографика”. Как оказалось, аж два года назад. А я свою на Авито покупал когда-то, потому что тираж был полностью распродан 🙂

https://leksandra.livejournal.com/120488.html

Приобщаемся к основам типографики и благодарим автора.

Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR

#инструмент дня

Постоянно всплывает в профильных чатах, решил, что надо сохранить.

Речь идёт о генераторе разделителей блоков на SVG. Дизайнеры такую чушь любят: от волн до спиралей и прочих кривых. А вот отрисовывать их в контурах — нет. Тыжпрограммист, ты сможешь.

Итак, встречайте: https://getwaves.io/

Есть даже плагин для Figma.

Ну и вдогонку пара похожих:
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
https://yoksel.github.io/wave-maker/

И чтобы добить набор, немного генераторов фонов в виде волн всё на том же SVG:
https://loading.io/background/m-wave
https://www.uplabs.com/posts/svg-gradient-wave-generator

#статья дня

https://habr.com/ru/post/503776/

Эффект перелистывания страниц — далеко не самая нужная штука в вебе. Желают её только менеджеры промо-проектов, но для кого-то они — единственные менеджеры 😭. Да и библиотек много.

Чем же хороша статья? А хороша она демонстрацией простой геометрии.

Очень многие разработчики стесняются визуализировать свои расчёты на бумаге (короче говоря, рисовать). Ещё некоторое количество верстальщиков просто не помнят или не могут применить элементарную геометрию 5-9 класса.

Конечно же это нужно в себе ломать. Не уметь в голове построить пересечение прямоугольников (если речь идёт о, например, эффектах при прокрутке страниц) — это абсолютно нормально. Чертите, рисуйте, вспоминайте школу.

#ссылка дня
#video #img #png #jpg #webp

Многие до сих пор страдают от карго-культа при выборе формата изображений для своих проектов. Кому-то сказали использовать webp везде и прикрутить к сайту декодер, кто-то до сих пор считает, что SVG всегда лучше PNG для технических изображений, а кто-то — что нужно поставлять на каждое устройство свой набор разрешений.

Но для начала — нужно разобраться в самих форматах и понять, что не всё так просто. А не слепо следовать за не всегда разумными утверждениями.

https://www.youtube.com/watch?v=CMlXUS6e46w

#ссылка дня
#html #css #grid #cheatsheet #памятка

Великолепная Yoksel выложила отличную шпаргалку по гридам с примерами. Думаю, здесь добавить нечего.

https://yoksel.github.io/grid-cheatsheet/

#статья дня
#js #esnext

Леа Веру (Lea Verou) рассказала о своём опыте рефакторинга большой кодовой базы с приходом опциональной последовательности (опциональный доступ к атрибутам, optional chaining) в широкий доступ.

Если коротко, это безумно удобно, как всегда присутствуют парочка неочевидных трюков, но отстрелить себе ногу тоже весьма просто.

https://lea.verou.me/2020/06/refactoring-optional-chaining-into-a-large-codebase-lessons-learned/

#статья дня
#css

И снова на сцене Ахмад Шадид (Ahmad Shadeed). На сей раз с “нетипичными” CSS-свойствами.

Сразу скажу, на мой взгляд все свойства более чем типичны. Дело тут в другом: они почему-то оказались в тени модных фишек или просто по какой-то причине прошли мимо (как object-fit, некоторым сложно составить правильный поисковый запрос, чтобы узнать о нём).

https://ishadeed.com/article/uncommon-css/

Вообще, хороший автор. Видно, что он в начале очень эффективного пути.