CSS

  • ХабрахабрФото Деплоим сайт в облако за рубль в месяц

    Деплоим сайт в облако за рубль в месяц

    Как часто бывает: делаешь pet-проект, разрабатываешь фронтенд лендинга, а потом понимаешь, что это нужно протестировать. Посмотреть, как отображается страница на разных устройствах, чтобы корректно ее адаптировать. Ведь не всегда DevTools отражают «полную картину». Может быть и другой сценарий. Порой нужно опубликовать в интернете страничку, например, с примерами работ по фотографии или дизайну. В подобных ситуациях есть статистические HTML-страницы, которые должны…

    Читать далее »
  • ХабрахабрФото Костыли из 90-х и принцип HTML First

    Костыли из 90-х и принцип HTML First

    Кадр из презентации Frontmania 2022: Kilian Valkhof — Stop using JavaScript for that Недавно на Хабре публиковался перевод статьи «Вам не нужен для этого JavaScript» с примерами, где код JS легко заменить на HTML. На самом деле возврат к основам HTML, простым сайтам и читаемому коду без сложных фреймворков — довольно популярная идея. Сейчас всё больше сайтов создаётся по принципу HTML…

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

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

    Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: Какие символы нужно пропускать в тексте для атрибута alt. В какой ситуации атрибут inert может быть…

    Читать далее »
  • ХабрахабрФото [Перевод] Не стоит недооценивать HTML

    [Перевод] Не стоит недооценивать HTML

    «HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения. И очень часто они вызывали у меня грусть. Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML,…

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

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

    Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: Какое количество символов следует использовать для текста подсказки для атрибута alt; В чём польза атрибута lang;…

    Читать далее »
  • ХабрахабрФото [Перевод] Скрытые возможности элемента <input>

    [Перевод] Скрытые возможности элемента <input>

    Элемент <input> в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике). Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для…

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

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

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

    Читать далее »
  • ХабрахабрФото Неизвестно полезный CSS

    Неизвестно полезный CSS

    CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства. Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию! Я собрал фишки, которые могут быть полезны в…

    Читать далее »
  • ХабрахабрФото Интересные трюки HTML. Экстремальный минимализм

    Интересные трюки HTML. Экстремальный минимализм

    Мы уже много говорили про оптимизацию сайтов до минимального размера, преимущества статичного HTML, а также упаковку сайта (и веб-сервера) в портативный формат одного исполняемого файла, который нативно исполняется под любой ОС. Но стремление к минимизации может пойти дальше, если вы хотите поместить весь сайт в адресную строку браузера. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт.…

    Читать далее »
  • ХабрахабрФото Сокровища HTML: 7 тегов, которые упростят вам жизнь

    Сокровища HTML: 7 тегов, которые упростят вам жизнь

    В этой статье я расскажу про 7 HTML-тегов, которые, возможно, вы еще не открыли для себя. Мы посмотрим, как они работают и насколько поддерживаются современными браузерами. Поехали! <sub> / <sup> Это теги для  добавления текста с надстрочным и подстрочным индексами. Иногда нам нужно выделить символы или цифры, которые находятся выше или ниже базовой линии текста. Например, в химии для обозначения…

    Читать далее »


Кнопка «Наверх»