Обновить
112.21

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 13

Время на прочтение6 мин
Количество просмотров1.4K

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

Сегодня мы рассмотрим следующие аспекты:

где полезно использовать элемент search;

существующие проблемы при использовании единиц измерения от размеров вьюпорта для установки размера текста;

как элемент hr влияет на опыт пользователей скринридера;

нужны ли заголовки модальным окнам.

Давайте начнём!

Читать далее

Новости

Зачем фавиконов нужно аж 24 штуки?

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров5.7K

Для каждого экрана, устройства и программы нужен свой размер фавикон изображения. Из статьи вы узнаете различные трюки, используемые для генерации фавикон, и об удобных инструментах для автоматической генерации.

Читать далее

Самый большой секрет HTML: тег <output>

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров7.6K

Все разработчики знают о теге <input>, это рабочая лошадка веба.

Но что такое <output>? Большинство его никогда не касались. Кто-то даже не подозревает о его существовании.

И очень жаль, ведь этот тег решает проблему, которую мы годами пытались решить связкой <div> и ARIA: динамические результаты, по умолчанию объявляемые программам для чтения экрана.

Этот тег уже много лет находится в спецификации, но почему-то скрывается у всех на виду.

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте — Часть 2

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров1.7K

Переменные Bootstrap — мощный инструмент для управления стилями, но без правильной структуры их тяжело использовать.

В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.

Читать далее

Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров2.8K

Всем привет, с вами Артем Леванов, Front Lead в WebRise. Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.

Читать далее

Дорогие джуны, не делайте так. Коллекция плохих привычек в HTML и CSS

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров21K

Привет, Хабр!

Давно я ничего не писал для джунов. А ведь HTML и CSS не стали проще для них. Всё так же есть сложности, и мне надо как-то помочь людям.

Я выделил несколько привычек, от которых лучше избавиться в самом начале карьеры фронтендера — главное, просто сделать это. Надеюсь, вам будет полезно.

Давайте посмотрим, что я вам подготовил.

Читать далее

Стоит ли пользоваться функцией If() в CSS?

Уровень сложностиСредний
Время на прочтение21 мин
Количество просмотров4.7K

CSS давно подвергается критике за отсутствие условной логики. Хотя мы разработали хитроумные обходные пути с использованием медиазапросов, переключаемых настраиваемых свойств и контейнерных запросов, эти решения часто кажутся слишком громоздкими и непрямыми. Рабочая группа CSS одобрила эту функцию для разработки, которая обещает внедрить настоящую условную стилизацию непосредственно в наши таблицы стилей.if()

Читать далее

Обзор Cursor 1.7: Пишем to-do приложение с ИИ-агентом

Время на прочтение6 мин
Количество просмотров10K

Привет, Хабр! Представьте у вас есть идея для небольшого приложения.  Вы начинаете продумывать его структуру и реализацию. Перед вами предстает ворох проблем; прописать разметку, стили, логику, отладить баги. Эти задачи могут вызвать затруднения у начинающих программистов и предпринимателей.  А что если бы у вас был персональный ассистент, который не просто подсказывает код, а сам пишет его по вашим инструкциям на естественном языке?

Читать далее

Парсить XML при помощи регулярных выражений нельзя… но давайте попробуем

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров2.2K

Парсинг HTML при помощи регулярных выражений — популярная ошибка и отличный пример использования неподходящего под задачу инструмента. Общепризнанно, что это плохая идея по множеству причин.

Существует знаменитый ответ на Stack Overflow о том, почему этого ни в коем случае не следует делать. На самом деле, этот ответ стал настолько популярным, что в определённых кругах используется, как копипаста. Каждый раз, когда я натыкаюсь на него, то думаю что он во многом справедлив... но в то же время, не могу согласиться с ним полностью...

Читать далее

Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров12K

Поделюсь с вами необычным опытом разработки упаковщика проекта с большой анимационной сценой в один независимый HTML файл, который может воспроизводиться в любом браузере без интернета и веб-сервера.

Читать далее

Неиспользуемый JavasScript код. Поиск и удаление

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.6K

Как найти и удалить неиспользуемый JavaScript код даже на крупном сайте. Объёмный, но простой в использовании способ.

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте — Часть 1

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.9K

При интеграции CSS-фреймворков или UI-библиотек часто подключают готовые сборки, но такой подход ограничивает возможности кастомизации и увеличивает размер проекта.

В этой статье я покажу, как использовать исходный код Bootstrap (SCSS), настроить модульную структуру и подключить только те компоненты, которые действительно нужны. Результат — чистая архитектура стилей, меньший размер сборки и удобный фундамент для будущей дизайн-системы.

Читать далее

Веб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами. Часть 1

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров3.7K

Пробуем собрать свой минималистичный starter-kit.

Комедия в трех действиях. Туториал из трех частей.

Создадим причудливый конфиг на webpack + собственный роутинг в первой части. Реализуем реактивные хранилища во второй и уменьшим сложность с помощью веб-компонентов в третьей.

Читать далее

Ближайшие события

[Пятничное] Я сломал русский язык. Теперь ваша очередь

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров7.9K

Все вокруг стараются сделать мир лучше, пишут редакторы, используют нейросети. Скука! Я решил пойти другим путём и создал "Лабораторию Абсурда" — которая намеренно и с особым цинизмом превращает любой осмысленный текст в лингвистический бред.

Не спорю, существуют и другие генераторы бреда, но я дарю вам 50 (или что-то около того) разных способов издевательства над текстом и здравым смыслом! Никаких рекламных баннеров, только ванильный JS и словари на тысячи слов, только хардкор!

Читать далее

JavaScript, отдохни! Делаем интерактивные вещи на HTML и CSS

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров9.9K

Привет, Хабр!

А вы интересуетесь современными возможностями CSS и HTML? Может, некоторые из вас думают, что нового там ничего не появится или что свежие фишки не поддерживаются браузерами? Это мнение давно устарело. Современные HTML и CSS позволяют реализовывать интерактивные элементы, которые раньше были доступны только с помощью JavaScript. Можно сказать, что границы между разметкой, стилями и программированием постепенно стираются.

На написание этой статьи меня подтолкнуло большое количество новых возможностей в современных HTML и CSS, да и не только современных: некоторые приёмы, о которых знают немногие, поддерживались ещё со времён IE. Многие по привычке используют готовые UI-библиотеки или CSS-фреймворки, опасаясь изучать что-то новое.

Я собрал компиляцию полезных практик и оформил их в сокращённом текстовом виде.

Читать далее

Практическое руководство по иконкам в веб-проектах — Часть 2

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров3K

Иконочные шрифты — лучшие!

Их очень легко сгенерировать, использовать и кастомизировать. Они имеют широкую поддержку в браузерах, а код выглядит максимально чистым. Но, к сожалению, есть и большой минус: иконочные шрифты не поддерживают более одного цвета. Узнайте о недостатках иконочных шрифтов и почему SVG-спрайты — лучшая из возможных альтернатив.

Читать далее

HTML мёртв, да здравствует HTML

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров14K

Браузеры — это очень странный мир. Хотя WebAssembly добился успеха, в том числе и на серверах, клиент по-прежнему ощущается примерно таким же, как и десять лет назад.

Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS.

Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать.

Не буду притворяться, что знаю о браузерах всё. Сегодня уже никто не знает всего, в этом-то и проблема.

Читать далее

HTML как архивный формат. Локальные мини-сайты

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров7.8K

В перспективе отключения глобального интернета в РФ актуальным становятся разные способы сохранять информацию в офлайне для последующего потребления: архивы кинофильмов, музыки, книг, копии сайтов — своя мини-версия Архива интернета.

Отдельного внимания заслуживает личный информационный архив, куда мы сохраняем самую ценную приватную информацию: скриншоты рабочих проектов, закладки, домашнее видео и прочее. Но в каком виде информация наиболее удобна для просмотра и поиска?

Один из вариантов — генерация локальных мини-сайтов с перекрёстными гиперссылками. В таком виде информация воспринимается очень комфортно.

Читать далее

Достаточно ли ru-RU для указания языка на веб-странице

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров1.6K

Вы добавили в настройки интерфейса строчку ru‑RU и решили, что локализация завершена, пользователи довольны. Поздравляем: вы официально вступили в ряды тех, кто ещё не видел, как выглядит языковой тег «во всей своей красе».

Когда пользователь открывает страницу в браузере, тот отправляет на сервер данные о языковых предпочтениях посетителя, и это далеко не всегда что‑то простое. Здесь мы рассмотрим, как именно указывается конкретный язык. Стандарт, в соответствии которым это происходит (RFC 5646), — ворота в языковой мультивселенную, где sl‑rozaj‑biske-1994 звучит как заклинание, а x‑private‑foo может означать что угодно — от диалекта вашей бабушки до внутреннего сленга команды маркетологов.

Читать далее

Коллекция полезных HTML и CSS фич, которые редко используются

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров13K

Привет, Хабр!

Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.

Давайте посмотрим, что я вам подготовил.

Читать далее
1
23 ...