#заметка дня
Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)
Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.
Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!
Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.
Путём несложной конфигурации указывается, какие конкретно правила CSS должны быть обработаны плагином и во что и как конвертировать ваши пиксели.
Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.
Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?
Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).
Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.
В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.
P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на
После поговорим о шлюзах и более сложной математике расчётов размеров шрифта и блоков.
#css #postcss #rem #vw #vh
Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)
Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.
Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!
Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.
Путём несложной конфигурации указывается, какие конкретно правила CSS должны быть обработаны плагином и во что и как конвертировать ваши пиксели.
Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.
Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?
Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).
Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.
В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.
P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на
vw+em, обратите внимание на https://uaz.ru/. Но делать так не надо! Зум у них сходит с ума, потому что на html шрифт указан в vw, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.После поговорим о шлюзах и более сложной математике расчётов размеров шрифта и блоков.
#css #postcss #rem #vw #vh
postcss.org
PostCSS - a tool for transforming CSS with JavaScript
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.
#заметка дня
Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)
Правильно, это продолжение заметок https://xn--r1a.website/htmlshit/1182 и https://xn--r1a.website/htmlshit/1183.
Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.
Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!
Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.
Путём несложной конфигурации указывается, какие конкретно правила CSS должны быть обработаны плагином и во что и как конвертировать ваши пиксели.
Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.
Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?
Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).
Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.
В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.
P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на
P. P. S. Если вам интересно дальше обсудить возможности шлюзов/адаптивной типографики — не забывайте реагировать на пост и оставлять комментарии.
#css #postcss #rem #vw #vh
Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)
Правильно, это продолжение заметок https://xn--r1a.website/htmlshit/1182 и https://xn--r1a.website/htmlshit/1183.
Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.
Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!
Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.
Путём несложной конфигурации указывается, какие конкретно правила CSS должны быть обработаны плагином и во что и как конвертировать ваши пиксели.
Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.
Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?
Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).
Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.
В общем, всегда хорошо, когда способов решения больше одного. У плагинов и у самого PostCSS прекрасная документация и настроить их можно практически в любой конфигурации.
P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на
vw+em, обратите внимание на https://uaz.ru/. Но делать так не надо! Зум у них сходит с ума, потому что на html шрифт указан в vw/vh в зависимости от ситуации, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.P. P. S. Если вам интересно дальше обсудить возможности шлюзов/адаптивной типографики — не забывайте реагировать на пост и оставлять комментарии.
#css #postcss #rem #vw #vh
Telegram
Будни разработчика
#заметка дня
Вы наверняка заметили, что призывы отказаться от пикселей звучат всё чаще и чаще. Я не буду сейчас описывать плюсы и минусы перехода на относительные единицы, я покажу простейшее решение.
Любителям шлюзов будет другая статья. Хотите — обсудим…
Вы наверняка заметили, что призывы отказаться от пикселей звучат всё чаще и чаще. Я не буду сейчас описывать плюсы и минусы перехода на относительные единицы, я покажу простейшее решение.
Любителям шлюзов будет другая статья. Хотите — обсудим…
🔥21👍8
#инструмент дня
Стандартные тени в CSS слишком... жёсткие. Когда они все придумывались — всё делалось максимально топорно, в итоге и градиенты у нас линейные и, стало быть, тени.
Об этом информации, в целом, достаточно много. Например, вот: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
В сети имеется достаточное количество генераторов теней, но это дико неудобно. Потому Андрей Ситник написал очередное расширение для так любимого нами PostCSS. Так и называется: Smooth Shadow.
Демо: https://postcss.github.io/postcss-smooth-shadow/
Такое мы любим!
#css #postcss #shadow
Стандартные тени в CSS слишком... жёсткие. Когда они все придумывались — всё делалось максимально топорно, в итоге и градиенты у нас линейные и, стало быть, тени.
Об этом информации, в целом, достаточно много. Например, вот: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
В сети имеется достаточное количество генераторов теней, но это дико неудобно. Потому Андрей Ситник написал очередное расширение для так любимого нами PostCSS. Так и называется: Smooth Shadow.
Демо: https://postcss.github.io/postcss-smooth-shadow/
Такое мы любим!
#css #postcss #shadow
❤11