Вёрстка сайтов

Как найти неиспользуемые стили

Большинство веб-разработчиков в процессе работы над проектом рано или поздно сталкиваются с тем, что становится трудно определить используются ли некоторые, прописанные ранее, стили в файлах CSS. Довольно часто подобное происходит при командной работе, когда со стилями работает несколько человек. Также бывает, что Вы меняете что-то в работе предыдущих разработчиков или производится небольшой редизайн. Таких вариантов можно ещё вспомнить много, но результат единственный – браузер обрабатывает «мертвые» селекторы.

Если таких селекторов пара-тройка – не беда. Но если код уже достаточно объёмен, то неиспользуемых селекторов наберётся приличное количество. Выявление и уборка таких стилей облегчит файлы и увеличит скорость загрузки страниц. Так что, совсем не лишним будет узнать о различных способах очистки файлов CSS.

Создание формы

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

Форма создаётся посредством тега < form >, и может содержать любые нужные тэги. Форма характеризуется рядом необязательных параметров: адресом обрабатывающей программы на сервере, элементами формы, представляющими типовые поля для ввода данных пользователями, кнопку для отправки информации на веб-сервер.

Семантическая разметка в HTML5 с помощью ARIA Role

Одинаковая структура блоков характерна для большинства сайтов. В основном этим блокам присваивают общепринятые имена классов или просто ID. Как правило, сайт включает в себя такие основные элементы как шапка (header), контент (content), в сайтбаре могут быть разновидности ¬– sidebar, leftbar, rightbar, навигацию (nav) и, естественно, подвал (footer).

Что касается HTML5, то здесь уже появляются специальные атрибуты, с помощью которых можно более чётко определить назначение элементов. Например, такими атрибутами являются role, которые предназначены для назначения ролей соответствующим блокам, показывая их значение и важность. Все атрибуты описаны в спецификации ARIA Role (WIA-ARIA specification).

@-правила в CSS

Собственно, разговор пойдет о правилах @charset, @import, @media и весьма популяром @font-face, позволяющем применять свои шрифты в сайтостроении.

@charset

Это правило изначально декларируется в самом начале файла и указывает на кодировку, применяемую в данном файле стилей. Правило @charset пишется в первой строке и не содержит тех или иных символов перед собой. К примеру, строка для кодировки UTF-8:

@charset "UTF-8"

@media

Это правило позволяет в файле стилей прописать определенные правила, применяемые для определенного типа устройств. К примеру, следующее правило будет работать исключительно для печатных устройств:

Определяем тип браузера с использованием JQuery

На сегодняшний день библиотека jQuery является самым популярным фреймворком для написания ненавязчивого JS. Большинство популярных CMS, таких, как Drupal, WordPress, основаны на использовании jQuery. Вследствие этого, верстальщику веб-страниц необходимо знать и уметь грамотно использовать эту библиотеку так же, как и язык HTML. При этом, jQuery позволяет делать полезные вещи, например, такие, как определение браузера. Для этого применяют свойства jQuery.browser.

jQuery.browser – это один из глобальных объектов jQuery. И чтобы определить, с какого браузера пользователь просматривает ваш сайт, используется $.browser. Это может пригодиться, когда вы захотите использовать отдельный элемент для каждого веб-браузера.

jQuery.browser поддерживает стандартные браузеры: Opera, Mozilla, FireFox, Internet Explorer и т.д.

Как поставить favicon.ico на сайт

Надеюсь, что многие из вас знают, что такое Favicon. Для тех, кто не знает, напомню: Favicon – это картинка, которая отображается перед адресом сайта в браузере или у сайта, находящегося в “Избранном” или в “Закладках”.

Стандартные размеры изображения не превышают 16х16 пикселей, расширение картинки – ICO (картинка.ico). Но использование изображений в формате ICO не обязательно, так как браузеры распознают любое расположение значков в HTML-коде, поэтому смело можете брать картинки с любым расширением. Не надо забывать, что favicon.ico нужно помещать именно в кореневую папку сайта.