[recovery mode] Добавление масштабирования при ширине экрана менее чем body min-width в Firefox и Safari

[recovery mode] Добавление масштабирования при ширине экрана менее чем body min-width в Firefox и Safari

В этом мини туториале я расскажу вам о том, как решить проблему отсутствия масштабирование страницы при ширине экрана меньше чем body min-width в браузерах Firefox и Safari, с помощью функции, решающей эту проблему. Читать далее

Подробнее
HTML, CSS: важен ли порядок названий классов CSS в атрибуте «class» HTML-элементов

HTML, CSS: важен ли порядок названий классов CSS в атрибуте «class» HTML-элементов

Если поменять порядок названий классов CSS в атрибуте «class» HTML-элемента, то поменяется ли отображение HTML-страницы в браузере? Точно не поменяется? Или точно поменяется? А, может быть, есть нюансы? Давайте попробуем разобраться. Для этого я загляну в действующий стандарт языка HTML, буду на основании определений из этого стандарта делать выводы и проверять их на практических примерах. Читать далее

Подробнее
Кто-нибудь, объясните мне прелесть tailwind

Кто-нибудь, объясните мне прелесть tailwind

Я честно пытаюсь понять идею tailwind, читаю официальную документацию и в преимуществах вижу полную ересь: Разобраться

Подробнее
Любопытные CSS фишки 2022 года

Любопытные CSS фишки 2022 года

За последнее время в CSS появилось достаточно новых возможностей, которые позволяют нам создавать новые решения для старых задач. Мне захотелось рассказать вам о тех, которые работают в современных браузерах, и их можно использовать прямо сейчас. Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с помощью современного CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду задерживаться, давайте начнем. Читать далее

Подробнее
PowerShell, HTML Agility Pack: разбор классов CSS на узле HTML-дерева

PowerShell, HTML Agility Pack: разбор классов CSS на узле HTML-дерева

Я развиваю скрипт на языке PowerShell для обхода и визуализации HTML-дерева из файла на языке HTML для анализа кода HTML на ошибки. В частности, для поиска ошибок при именовании классов CSS. Для этого сначала нужно получить набор классов из атрибута class HTML-элементов, а затем перебрать эти названия классов в цикле. Для разбора HTML я использую библиотеку «HTML Agility Pack». Также я разбираю, как можно обработать ссылки на символы (их еще называют по-английски «HTML-entities»)

Подробнее
[Перевод] Как работают браузеры, часть 3: деревья специальных возможностей и рендеринга

[Перевод] Как работают браузеры, часть 3: деревья специальных возможностей и рендеринга

Это заключительная статья из цикла статей о работе браузеров. Ссылка на первые два перевода: Часть 1: навигация и получение данных Часть 2: парсинг и выполнение JS Статьи предназначена для начинающих разработчиков и тех, кто интересуется разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя. Помимо деревьев, о которых мы уже говорили — DOM, CSSOM и AST — браузеры также строят дерево специальных возможностей. Деревья, построенные на этапе…

Подробнее
HTML, CSS: какие символы можно использовать в названиях классов CSS

HTML, CSS: какие символы можно использовать в названиях классов CSS

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами. Читать далее

Подробнее
Заметка о полезных возможностях современного CSS

Заметка о полезных возможностях современного CSS

Привет, друзья! В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года. "Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности. Читать дальше →

Подробнее
Центрируй, властвуй, располагай

Центрируй, властвуй, располагай

Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech. Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами. Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать). Существует множество способов, как…

Подробнее
[Перевод] Итак, на дворе 1997-ой год, и вы хотите создать веб-сайт

[Перевод] Итак, на дворе 1997-ой год, и вы хотите создать веб-сайт

И так вы оказались в 1997 году и вам нужно создать веб-сайт. Какие ваши действия и как вы будете это делать? Читать...

Подробнее
Sass: разрабатываем дизайн-систему

Sass: разрабатываем дизайн-систему

Привет, друзья! В данной статье мы разработаем простую, но относительно полноценную дизайн-систему для веб-приложения средствами Sass. Почему Sass? Потому что, кроме полной поддержки CSS, Sass предоставляет несколько интересных инструментов, позволяющих существенно сократить шаблонный код, в чем вы сами скоро убедитесь. На мой взгляд, несмотря на стремительное развитие CSS в последние годы, Sass продолжает оставаться актуальным, по крайней мере, при работе над серьезными…

Подробнее
Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире

Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 11–17 июля. Читать далее

Подробнее