Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Распространенные ошибки новичков в CSS Категория: CSS
Название: Распространенные ошибки новичков в CSS
Дата добавления: 29-06-2012
Раз просмотрено: 491
Комментарии: 0
Рейтинг: * * * * * * * * * * (1 голос)

Распространенные ошибки новичков в CSS

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

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

Не забывайте про кавычки

Это то, что большинство разработчиков считают, что они могут игнорировать, в основном, потому, что отсутствие кавычек в CSS файле зачастую не изменит внешний вид сайта, как если бы вы допустили такую же ошибку в HTML файле. Тем не менее, с первых же дней каскадных таблиц стилей, W3C, постановил, что все имена шрифтов из двух и более слов, должны быть заключены в кавычки, когда помещаются в CSS документ.

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

font-family: 'Times New Roman', 'Times Roman', serif;

Комментируйте свой CSS файл

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

/* Это CSS комментарий */

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

Не забывайте о пунктуации

Проблема, которая чаще всего заставляет переставать нормально функционировать таблицы стилей – это отсутствие знаков препинания, которое приводит к многочисленным ошибкам. В таблицах стилей широко используются запятые, скобки и точки с запятой при описании свойств, классов и идентификаторов. Хорошо продуманный CSS класс выглядит примерно так:

.class {
	margin: 0;
	padding: 0 3px;
	font-family: 'Times New Roman', 'Times Roman', serif;
	color: #000;
}

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

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

Сокращайте код

Ключ созданию идеальной таблицы стилей – это сокращение фактического размера файла и умение заставить его выполнять все свои функции наиболее эффективным образом. Лучший способ достичь этого – использовать сокращения везде, где это возможно. Существует известное количество способов сокращения CSS кода, и любой веб-дизайнер должен знать, что чем меньше символов, тем меньше размер файла. Это особенно верно в текстовых документов, таких как таблицы стилей.

Первый способ выполнить сокращение это сокращение веб-безопасных цветов (цвета, которые могут быть представлены тремя символами). Например белый цвет в шестнадцатеричной системе выглядит так: #FFFFFF, а бордовый так: #СС0000. Так как эти цвета являются веб-безопасными, они могут быть сокращены до таких значений: #FFF и #C00. Но сокращение цветов – не единственный способ сократить ваш CSS файл.

Другой способ сэкономить размер файла – это убрать ненужные единицы измерения, такие как пиксели для нулевых отступов, полей и так далее. Многие неопытные разработчики пишут такие вещи, как «0px» на протяжении всех своих документов, например, указывая, что толщина границы равна нулю пикселей. Однако, когда значение свойства равно нулю, никакие единицы измерения не требуются.  Это действительно неплохой способ экономии вашего времени и размера файла.

Используйте сокращенные свойства

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

.class {
	padding-left: 0;
	padding-right: 0
	padding-top: 0;
	padding-bottom: 0;
}

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

.class {
	padding: 0 0 0 0;
}

Три строки кода эффективно устранены, в то время как функциональность элемента полностью сохраняется. Конечно, в этом примере не учитывается тот факт, что, если все отступы равны нулю, то требуется только одно число.

Это интересно: «Идеальные иконки для сайта».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.