У Льоні сьогодні
📢 Канал в Telegram @leonid_today
🦣 @leonid_today@shevtsov.me в Федиверсі

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

23.04.2023

Декілька можливостей сучасного CSS

Погода сьогодні хороша, тож прогресу не так багато. Ще декілька штук з CSS, про які я дізнався за останні дні:

• background-attachment: fixed - привʼязує фон до екрана, а не до елементу, тобто як position: fixed, тільки для фону. Проте фон застосовується тільки для того елементу, де він вказаний. Дозволяє відтворити ефект паралакса на чистому CSS.

• scroll-snap-align - робить прокрутку “липкою”, тобто спонукає її зупинятись на зазначених елементах. Якщо на сторінці є візуально окреслені блоки, то така прокрутка працюватиме акуратніше, чіткіше. Можна навіть примусити зупинятись тільки на заданих точках (scroll-snap-type: mandatory), що корисно, наприклад, для презентацій.

• @media (max-aspect-ratio: 1) - медіазапит на відношення сторін екрана. Так можна робити адаптивний дизайн для вертикальних пристроїв (вони ще відомі як “смартфони”). Я раніше робив тільки за шириною, що в принципі теж надійно, але менш явно. Тим більше, що маю потребу розміщати елементи по-іншому й для великих вертикальних екранів — планшетів, наприклад.

• gap - при верстці на flex (або grid, дякую, Андрію) більш не треба робити хаків на кшталт “робити відступ справа всім елементам, окрім останнього”. Можна просто задати властивість gap - відстань між елементами — та забути про дубльовані відступи.

• vw, vh - ці одиниці вимірювання привʼязані до розміру вікна. Тому в них можна вказувати розміри, що відповідно адаптуються. Є ще vmax та vmin - максимум чи мінімум з обох.Наприклад, зараз в мене в блозі розмір шрифту на великому екрані 125%, на екрані планшета 110%, а на телефоні 100%; якби я переробив це на vmax, можна було задати розмір один раз, наприклад, 2vmax. Ще ці одиниці зручні та інтуїтивні також для повноекранної верстки.