#статья дня
#css #inline #layout
На CSS-Tricks вышла статья про статус inline-block в 2020 году.
Что такой inline-block? Это значение свойства display, которое позволяет строчным элементам иметь свои собственные размеры, отступы, поля.
Раньше оно часто использовалось для формирования сеток, но приходом flexbox-модели это стало не нужно и про inline-block многие вообще забыли.
Статья рассматривает варианты, когда оно всё ещё может быть полезным:
1. Для трансформации inline-элементов в строке, поскольку иначе к ним трансформацию применить нельзя
2. Позволяет обойти неприятную особенность CSS-колонок, а именно, их разрыв посреди контентной части.
3. Помогает быстро и лаконично сделать список горизонтальным.
Остальное, а также примеры плохого использования, читайте тут: https://css-tricks.com/when-do-you-use-inline-block/
Нелишним будет упомянуть и статью на прекрасном ресурсе css-live.ru, повествующую об интересных примерах использования inline-block с гораздо большим погружением в тему: https://css-live.ru/articles-css/udivitelnyj-i-neizvestnyj-inline-block.html
#css #inline #layout
На CSS-Tricks вышла статья про статус inline-block в 2020 году.
Что такой inline-block? Это значение свойства display, которое позволяет строчным элементам иметь свои собственные размеры, отступы, поля.
Раньше оно часто использовалось для формирования сеток, но приходом flexbox-модели это стало не нужно и про inline-block многие вообще забыли.
Статья рассматривает варианты, когда оно всё ещё может быть полезным:
1. Для трансформации inline-элементов в строке, поскольку иначе к ним трансформацию применить нельзя
2. Позволяет обойти неприятную особенность CSS-колонок, а именно, их разрыв посреди контентной части.
3. Помогает быстро и лаконично сделать список горизонтальным.
Остальное, а также примеры плохого использования, читайте тут: https://css-tricks.com/when-do-you-use-inline-block/
Нелишним будет упомянуть и статью на прекрасном ресурсе css-live.ru, повествующую об интересных примерах использования inline-block с гораздо большим погружением в тему: https://css-live.ru/articles-css/udivitelnyj-i-neizvestnyj-inline-block.html
CSS-Tricks
When do you use inline-block? | CSS-Tricks
The inline-block value for display is a classic! It's not new and browser support is certainly not something you need to worry about. I'm sure many of us
#статья дня
…а точнее, цикл статей Ника Мостового (на английском) о производительности фронтенда, составляющие вполне себе методичку (это я так handbook перевёл, вроде ок).
1. Как браузер отрисовывает страницу.
2. Как можно улучшить FMP (First Meaningful Paint) и TTI (Time to Interactive).
3. Событийный цикл, разметка, отрисовка, композиция, стек вызова.
Звучит страшно, но статьи прекрасно оформлены, с большим количеством схем, и написаны простым языком. В общем-то, я бы назвал эти знания обязательными.
#css #javascript #layout #handbook #fmp #fcp #tti #eventloop
…а точнее, цикл статей Ника Мостового (на английском) о производительности фронтенда, составляющие вполне себе методичку (это я так handbook перевёл, вроде ок).
1. Как браузер отрисовывает страницу.
2. Как можно улучшить FMP (First Meaningful Paint) и TTI (Time to Interactive).
3. Событийный цикл, разметка, отрисовка, композиция, стек вызова.
Звучит страшно, но статьи прекрасно оформлены, с большим количеством схем, и написаны простым языком. В общем-то, я бы назвал эти знания обязательными.
#css #javascript #layout #handbook #fmp #fcp #tti #eventloop
#статья дня
Неожиданно прекрасная статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/
"Когда?", — спросите вы. "Тогда", — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.
В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.
Получилось прекрасно, всплакнул.
Каждый аспект работы проиллюстрирован и объяснен, почему так, а не иначе. Очень хорошо разобрано всё на компоненты. Я получил эстетическое удовольствие от чтения.
Рекомендую. 11 из 10.
#ie6 #facebook #css #layout
Неожиданно прекрасная статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/
"Когда?", — спросите вы. "Тогда", — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.
В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.
Получилось прекрасно, всплакнул.
Каждый аспект работы проиллюстрирован и объяснен, почему так, а не иначе. Очень хорошо разобрано всё на компоненты. Я получил эстетическое удовольствие от чтения.
Рекомендую. 11 из 10.
#ie6 #facebook #css #layout
#статья дня
В честь официального прекращения поддержки IE вспомним неожиданно прекрасную статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/
«Когда?», — спросите вы. «Тогда», — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.
В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.
Получилось прекрасно, всплакнул.
Каждый аспект работы проиллюстрирован и объяснен, почему так, а не иначе. Очень хорошо разобрано всё на компоненты. Я получил эстетическое удовольствие от чтения.
Рекомендую. 11 из 10.
#ie6 #facebook #css #layout
В честь официального прекращения поддержки IE вспомним неожиданно прекрасную статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/
«Когда?», — спросите вы. «Тогда», — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.
В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.
Получилось прекрасно, всплакнул.
Каждый аспект работы проиллюстрирован и объяснен, почему так, а не иначе. Очень хорошо разобрано всё на компоненты. Я получил эстетическое удовольствие от чтения.
Рекомендую. 11 из 10.
#ie6 #facebook #css #layout
👍16
#статья дня
Disclaimer: мне не нравится решение, представленное в статье, которую я сейчас опишу. Почему же я её упоминаю? Потому что идея-то классная, но недожали.
Я писал о масштабировании интерфейса пару раз. Всё сводилось к следующему: берём ширину дизайн-макета за 100% и считаем единицы размеров относительно размера видимой ширины экрана:
Раз: https://yangx.top/htmlshit/1182
Два: https://yangx.top/htmlshit/1183
Три: https://yangx.top/htmlshit/1229
Но с момента первой публикации этих постов (начало 2021 года) прошло достаточно много времени, инструменты вроде clamp и адаптивной типографики начали захватывать мир: https://yangx.top/htmlshit/902
Так вот, ребята из статьи на CSS Tricks примерно в то же время решили применить оба подхода, заодно показав нативное CSS-решение прямого масштабирования: https://css-tricks.com/how-to-get-a-pixel-perfect-linearly-scaled-ui/
Так что же с ней не так?
Они наступили на те же грабли, что я когда-то с vw/vh: потеряли возможность масштабирования в браузере. А это жирный минус на десктопах (на мобилах такой проблемы нет).
Тем не менее, направление-то классное, надо подумать на досуге, как это сделать умнее.
Но не забывайте, что CSS-то развивается, появились запросы от контейнера и родительский селектор. Pixel-perfect вёрстке давно пора умереть в глобальном смысле.
#css #layout #design
Disclaimer: мне не нравится решение, представленное в статье, которую я сейчас опишу. Почему же я её упоминаю? Потому что идея-то классная, но недожали.
Я писал о масштабировании интерфейса пару раз. Всё сводилось к следующему: берём ширину дизайн-макета за 100% и считаем единицы размеров относительно размера видимой ширины экрана:
Раз: https://yangx.top/htmlshit/1182
Два: https://yangx.top/htmlshit/1183
Три: https://yangx.top/htmlshit/1229
Но с момента первой публикации этих постов (начало 2021 года) прошло достаточно много времени, инструменты вроде clamp и адаптивной типографики начали захватывать мир: https://yangx.top/htmlshit/902
Так вот, ребята из статьи на CSS Tricks примерно в то же время решили применить оба подхода, заодно показав нативное CSS-решение прямого масштабирования: https://css-tricks.com/how-to-get-a-pixel-perfect-linearly-scaled-ui/
Так что же с ней не так?
Они наступили на те же грабли, что я когда-то с vw/vh: потеряли возможность масштабирования в браузере. А это жирный минус на десктопах (на мобилах такой проблемы нет).
Тем не менее, направление-то классное, надо подумать на досуге, как это сделать умнее.
Но не забывайте, что CSS-то развивается, появились запросы от контейнера и родительский селектор. Pixel-perfect вёрстке давно пора умереть в глобальном смысле.
#css #layout #design
🤔2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.
Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.
И сегодня мне принесло очередной! FlexBox Labs: https://flexboxlabs.netlify.app/
Из названия понятно, что речь о флексбоксе, не о гридах. Но — повторю — одно другого не отменяет ни разу. Флекс и грид решают разные задачи, потому — стоит внимания.
Особенно учитывая, что на рынке не так много конструкторов под флекс, гриды казались более крутой технологией и натурально получили больше конструкторов.
Да и короткое объяснение, что и когда применять, на канале уже было: https://yangx.top/htmlshit/607
А что ещё круто, проект — открытый, можно держать у себя локально: https://github.com/prazzon/flexbox-labs
Генерирует как CSS, так и классы Tailwind.
Впрочем, гриды конструктор тоже может, в экспериментальном режиме: https://flexboxlabs.netlify.app/grid
#css #flex #layout
Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.
Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.
И сегодня мне принесло очередной! FlexBox Labs: https://flexboxlabs.netlify.app/
Из названия понятно, что речь о флексбоксе, не о гридах. Но — повторю — одно другого не отменяет ни разу. Флекс и грид решают разные задачи, потому — стоит внимания.
Особенно учитывая, что на рынке не так много конструкторов под флекс, гриды казались более крутой технологией и натурально получили больше конструкторов.
Да и короткое объяснение, что и когда применять, на канале уже было: https://yangx.top/htmlshit/607
А что ещё круто, проект — открытый, можно держать у себя локально: https://github.com/prazzon/flexbox-labs
Генерирует как CSS, так и классы Tailwind.
Впрочем, гриды конструктор тоже может, в экспериментальном режиме: https://flexboxlabs.netlify.app/grid
#css #flex #layout
👍28❤5🫡1