При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи? В этой статье я разбираю этот вопрос со ссылками на действующие стандарты HTML и CSS, даю ответы, привожу примеры с проверкой соответствующими валидаторами.
CSS *
Каскадные таблицы стилей
Новости
Мета-приложения и Symbiote.js
Определимся сразу, что мета-приложения и мета-компоненты - это еще не устоявшиеся в индустрии термины. Это скорее предложение, которое может быть принято или отвергнуто сообществом веб-разработчиков. Самое время объяснить, что конкретно мы имеем в виду.
Заметка о полезных возможностях современного CSS
Привет, друзья!
В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS
. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.
"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.
Центрируй, властвуй, располагай
Всем привет, с вами Кирилл Мыльников, frontend разработчик компании Usetech.
Сегодня я хочу рассказать о вертикальном и горизонтальном центрировании CSS (Cascading Style Sheets). В сети есть много статей на эту тему, но я хочу выделить все виды горизонтального и вертикального центрирования с примерами.
Тема довольно популярная для тех, кто просто верстает или занимается полноценной frontend-разработкой (ведь нам всегда нужно что-то центрировать).
Существует множество способов, как нужно отцентрировать элемент, в тех или иных ситуациях, каждый способ по своему хорош.
В этой статье я разберу следующие виды центрирования:
— Горизонтальное центрирование;
— Вертикальное центрирование;
— Горизонтальное и вертикальное центрирование.
Начнём.
Итак, на дворе 1997-ой год, и вы хотите создать веб-сайт
И так вы оказались в 1997 году и вам нужно создать веб-сайт. Какие ваши действия и как вы будете это делать?
[В закладки] Как работает браузер
К старту курса по Fullstack-разработке на Python делимся лонгридом от ведущего программиста компании THG. Специалистам материал будет полезен в подготовке к собеседованиям, а новичкам поможет получить целостное представление о том, что происходит у браузера под капотом.
Sass: разрабатываем дизайн-систему
Привет, друзья!
В данной статье мы разработаем простую, но относительно полноценную дизайн-систему для веб-приложения средствами Sass.
Почему Sass
? Потому что, кроме полной поддержки CSS
, Sass
предоставляет несколько интересных инструментов, позволяющих существенно сократить шаблонный код, в чем вы сами скоро убедитесь. На мой взгляд, несмотря на стремительное развитие CSS
в последние годы, Sass
продолжает оставаться актуальным, по крайней мере, при работе над серьезными проектами.
При разработке дизайн-системы в части терминологии, названий, значений переменных и т.п. я буду ориентироваться, в основном, на Bootstrap и немного на Tailwind.
Если вам это интересно, прошу под кат.
Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 11–17 июля.
Отступ 8px у body: история стиля, который никому не нужен
Во всех браузерах элементу body через таблицу стилей по умолчанию добавляется внешний отступ 8px. Но почему именно 8px? Разбираемся вместе с автором книги Jump Start Sass: Get Up to Speed With Sass in a Weekend к старту курса по Fullstack-разработке на Python.
Шейдеры, голограммы и утечка света на чистом CSS
К старту курса по Fullstack-разработке на Python рассказываем, как на чистом современном CSS имитировать шейдеры аккуратным наложением слоёв и эффектов. За подробностями и демонстрациями приглашаем под кат.
Доступность и frontend: стандарты разработки продуктов для незрячих и слабовидящих людей
Согласно данным Всемирной организации здравоохранения, серьезные проблемы со зрением испытывают около 300 миллионов человек на нашей планете. Из них более 40 миллионов являются полностью незрячими.
Это огромная цифра, для сравнения: население Испании составляет всего 60 миллионов человек. По сути, в мире существуют целые «страны», населенные людьми с ограничениями по зрению, которым точно так же хочется общаться, делиться информацией и получать знания из всемирной паутины, как и всем нам.
Проведите эксперимент: закройте глаза и попробуйте воспользоваться Интернетом – прочитать новости на сайте Яндекса, зайти в вашу любимую социальную сеть или записать голосовое сообщение в мессенджере другу. Скорее всего, у вас ничего не получится.
А ведь с подобными проблемами каждый день сталкиваются миллионы слепых людей по всему миру. Итак, как же сделать сайт или приложение более доступными для незрячих и слабовидящих?
Фронтенд-новости №14. Bun: новая среда выполнения JavaScript, руководство по созданию форм, «Дней без ошибок в коде: 0»
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 4–10 июля.
Десять лет — полет нормальный
Всем привет!
Именно так начался пост десятилетней давности о появившемся сайте со шрифтами. Да, вот так незаметно пролетели 10 лет, и по меркам интернета это, пожалуй, возраст человека, который уже закончил учиться и вышел в свободное плавание. Так и наш проект, пройдя все переделки, стабилизировался в своем функционале и движется по заданному курсу. Но за все это время одно осталось неизменным — бесплатные шрифты и свободный доступ к ним.
Как с помощью Core Web Vitals влюбить в свой сайт пользователей и поисковые системы
Рассказываем, почему разработчики нашей компании уделяют большое внимание Core Web Vitals и как эти метрики помогают повысить качество взаимодействия веб-ресурса с пользователем. В конце материала — подробная таблица с основными рекомендациями по улучшению CWV и способами решения разных задач, которые мы применяем.
Scrollbar в современном CSS
Начнем с того что scrollbar – это самый обыденный элемент, присутствующий на всех веб-сайтах и в каждом приложении. Исторически сложилось так, что стилизовать scrollbar-ы было очень сложно и многие из разработчиков помучились с ними и стараются избегать работы с ними, но все же, как мне кажется, мы должны уделять им немного больше внимания. Давайте посмотрим, что мы можем сделать в 2022 году, чтобы улучшить возможности прокрутки для наших пользователей.
Еще один способ использовать SVG в React. На этот раз удобный
SVG
-изображения можно вставлять непосредственно в html
, можно использовать символьные спрайты, теги <img>
, <object>
и даже <iframe>
. Можно подключать SVG
через data-url
, css-backgrounds
, css-filters
и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG
, необходимо вставлять SVG
-изображения непосредственно в html
-разметку. Хотя на самом деле есть еще один способ. И он удобный.
Как создавать иконки сайтов в 2022 году — всё о favicon
Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. Фронтенд-разработчики сейчас вынуждены создавать более 20 PNG-файлов, чтобы отобразить крошечный логотип веб-сайта на вкладке браузера или сенсорном экране. Статья расскажет, как использовать более разумный подход и создать минимальный набор иконок, соответствующий большинству современных потребностей.
Статья глубоко погружается в тему, поэтому в начале я даю два фрагмента кода для тех, кто уже достаточно настрадался и понимает, что делать. Тем не менее, я всем рекомендую читать статью целиком!
Создание музыкального инструмента с помощью Web Audio API
Недавно я поехал в Техас и купил трехрядный диатонический баян. Диатонические аккордеоны популярны для множества различных типов народной музыки, которую обычно учат на слух. Это хорошо для меня, потому что я все равно не умею читать ноты.
Аккордеон имеет 34 кнопки со стороны высоких частот и 12 кнопок со стороны басов. В отличие от фортепианного аккордеона, который имеет такое же логическое хроматическое расположение, как и фортепиано, у диатонического аккордеона просто набор кнопок, и я действительно не знал, с чего начать. Кроме того, каждая нота отличается независимо от того, вытягиваете ли вы меха или вталкиваете их, поэтому на самом деле на стороне высоких частот 68 нот (хотя некоторые из них повторяются). Кроме того, как я думаю, вы знаете, аккордеоны громкие. Очень громкие. Чтобы сильно не злить соседей, и узнать, как работает компоновка этой коробки, я решил сделать маленькое веб-приложение.
Делаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера
Перед нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы, задача вполне тривиальна, и сходу можно назвать несколько вариантов её решения, не ломая голову, но всегда есть дополнительные условия, которые усложняют выполнение простых задач. В данной статье мы будем рассматривать решение небольшой задачи: как сделать максимально возможный размер шрифта динамического текста в его родительском контейнере. Или же, как впихнуть невпихуемое.
Фронтенд-новости №10. Опубликован HTTP/3, History API мёртв, WebContainers доступны в Firefox
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 6–12 июня.
А вот главные новости:
HTTP/3 опубликован в качестве предлагаемого стандарта
History API мёртв, да здравствует Navigation API
WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox.
Вклад авторов
-
alexzfort 9303.0 -
grokru 2491.2 -
ilusha_sergeevich 1780.6 -
alizar 837.8 -
ru_vds 814.4 -
dudeonthehorse 641.0 -
Delka 497.0 -
Mithgol 474.0 -
derSmoll 452.0 -
Paul_King 421.0