Верстка \ HTML5

HTML5 формы: типы тега input

От автора: вторая часть статьи, посвященной типам тега input. Вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

Продолжить чтение

Верстка \ HTML5

HTML5 формы: типы тега input

От автора: вы должны знать про атрибут type в поле input. Этот атрибут задает тип инпута в форме, который будет видеть пользователь. Если атрибут пропущен, или используется новое значение в старом браузере, тег все равно будет работать. Будет задан тип по умолчанию type=”text”. Это основной момент, который позволяет использовать HTML5 формы уже сегодня, даже если вы поддерживаете старые браузеры. Если у вас есть новые типы, например, email или search, то в старых браузерах отобразится простое текстовое поле.

Продолжить чтение

Верстка \ CSS 3

CSS-архитектура Блок-Элемент-Модификатор (БЭМ)

От автора: БЭМ или Блок-Элемент-Модификатор – это методология, система именования, а также набор инструментов. БЭМ создана в Яндексе и предназначена для быстрой разработки в крупных командах. В этом разделе мы остановимся на концепции и системе именования.

Продолжить чтение

Верстка \ CSS 3

Золотые правила по написанию чистого CSS

От автора: статья является выдержкой из нашей книги CSS мастер, написанной Tiffany Brown. Как уже говорилось, существуют правила по написанию чистого CSS кода, которых необходимо максимально придерживаться, чтобы не было ошибок. Они помогут писать легковесный CSS код, который можно будет повторно использовать.

Продолжить чтение

Верстка \ CSS 3

Сортировка и выравнивание элементов в Grid Layout

От автора: в этом уроке вы научитесь изменять порядок следования элементов с помощью модуля Grid Layout, после чего мы обсудим, как настроить выравнивание этих элементов в сетке. Мы уже изучили парочку важных тем по Grid. Начали мы с различных способов размещения элементов в Grid Layout, после чего познакомились с алгоритмом авторазмещения в сетке. Для правильной работы демо в этом уроке рекомендую использовать последнюю версию Firefox (52 на момент написания статьи) или Chrome (57 на момент написания статьи).

Продолжить чтение

Верстка \ CSS 3

Изучение архитектуры CSS: атомный CSS

От автора: если БЭМ – это любимец сообщества, то атомный CSS – мятежный диссидент. Thierry Koblentz из Yahoo ввел и объяснил это понятие в 2013 в своей статье «изучение лучших CSS практик». Атомный CSS использует плотную библиотеку имен классов. Классы часто названы сокращениями и проистекают из того контента, на который назначаются. В атомном CSS можно задать, что будет выполнять класс, но связи между именами классов и типами контента нет (по крайней мере, между классами, которые используются в стилях).

Продолжить чтение

Верстка \ CSS 3

Свойство speak

От автора: свойство speak определяет то, как браузер будет читать контент, например, через скрин ридер. Другими словами, свойство стилизует речь, как другие CSS свойства стилизуют визуальные элементы веб-страниц.

Продолжить чтение

Верстка \ Адаптивная верстка

Должны ли адаптивные сайты быть такими длинными на мобильных устройствах?

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

Продолжить чтение

Верстка \ HTML&CSS

Жидкая типографика

От автора: с помощью вьюпорт единиц измерения и функции calc() можно настраивать размер font-size и других свойств относительно размера экрана. То есть размер может быть жидким. Шрифт не будет всегда фиксированным или прыгать с размера на размер в медиа запросах.

Продолжить чтение

Верстка \ HTML5

Валидация HTML5 документов

От автора: в предыдущей главе мы рассказали вам про ряд изменений синтаксиса в HTML5, а также затронули проблемы валидации. Давайте более подробно разберем эти вопросы, чтобы вы имели лучшее представление о том, как изменилась валидация страниц.

Продолжить чтение