Работа с CSS может показаться постоянной битвой. Браузеры всегда меняют способ, которым они читают код (* кашель * Internet Explorer * кашель *), и кажется, что есть много крошечных «хитростей» CSS. Несмотря на то, что это невероятно мощный язык, его легко можно использовать неправильно, что обречет ваше развитие на целую вечность несовершенств.
1. Игнорирование совместимости браузера
Вероятно, это проблема номер один в веб-разработке, поскольку вы должны иметь одинаковые макеты, независимо от того, какой браузер использует посетитель сайта для навигации по странице. Этот факт иногда может показаться проклятием вашего существования: существуют фундаментальные различия в том, как Internet Explorer отображает страницу, по сравнению с Firefox. Хотя это не так плохо, как раньше , между браузерами все еще есть разница.
Веб-разработчикам легко расположить страницу в своем любимом браузере и не беспокоиться о том, как она выглядит в других основных браузерах, поскольку вы, скорее всего, не увидите различий. (Я являюсь основным нарушителем этого. Я иногда проектирую сайт в Firefox и забываю о проверке в IE до тех пор, пока это не будет сделано!) Хотя существуют некоторые проверенные и надежные методы, помогающие защитить макеты для рендеринга в различных браузерах, Лучший способ убедиться, что все выглядит постоянно, — это просто использовать Browsershots . Browsershots дает точный снимок того, как ваш сайт выглядит на разных платформах и в разных браузерах, что позволяет вам убедиться, что в браузере ничего не выглядит в стиле фанк.
2. Не учитывать меньшие разрешения браузера
Хотя многие из нас, веб-разработчиков, имеют большие компьютерные мониторы — и весьма гордятся этим, — значительная часть посетителей вашего сайта может этого не делать. Вы можете проверить свои аналитические программы, чтобы увидеть разрешения браузера вашего посетителя и их широкий диапазон (Google Analytics делает это чудесно). Тем не менее, существует разница в том, как дизайн выглядит в разрешении 1024×768, в отличие от разрешения 800×600. Это может сделать красивый дизайн практически бесполезным.
Я недавно столкнулся с этой реализацией, когда я настраивал дизайн для Trendfo . Большая часть посетителей сайта использовала меньшие браузеры, из-за чего изображение частично блокировало некоторые объявления, давая мне меньше кликов и, в конечном итоге, меньший доход с сайта.
Учет небольших браузеров означает, что все ваши посетители довольны и находят нужную им информацию.
3. Не учитывая рамки
Если вы разрабатываете макет CSS с нуля, вы можете спросить себя, почему. Точно так же, как ничто не ново под солнцем, так и с CSS. Существует множество CSS-фреймворков, таких как Blueprint и 960 CSS Framework . Они созданы, чтобы помочь вам создавать пуленепробиваемые макеты без необходимости начинать что-либо с нуля. Эти макеты имеют кросс-браузерную совместимость и были тщательно протестированы. На самом деле, если вы не делаете что-то совершенно радикальное, требующее загрузки пользовательского кода, просто используйте CSS-фреймворк.
Зачем изобретать велосипед?
4. Не использовать общие классы
Может быть довольно легко не думать о будущем, когда мы разрабатываем сайты. Часто мы будем называть наши CSS-классы чем-то другим каждый раз, когда мы разрабатываем сайт, в отличие от создания простого CSS-класса, который мы можем многократно использовать в нашем дизайне, не выискивая то, что мы использовали ранее. Это будет гарантировать, что дизайн нашего сайта остается неизменным на протяжении всех изменений дизайна.
Вы можете использовать универсальный класс, такой как:
(Примечание редактора: двойные «права» являются результатом ошибки в нашей программе просмотра кода, правильный код, конечно, .right {float: right}.)
|
1
|
.right{float:right}
|
Чтобы держать вещи в правильном направлении, когда вы этого хотите. Таким образом, вы можете оформить DIV ID как:
|
1
|
<div id=»block_text» class=»right»></div>
|
Я обычно использую по крайней мере три общих класса, когда создаю дизайн сайта:
|
1
2
3
|
.clear{clear:both}
.right{float:right}
.left{float:left}
|
5. Не проверять HTML
Могу поспорить, что вы не знали, что проверка вашего HTML может также повлиять на ваш CSS, не так ли? Ну, это может. Прежде всего, вы не можете проверить свой CSS, пока у вас нет действительного HTML. Во-вторых, есть много случаев, когда ваш HTML может вызывать ваши проблемы, а не ваш CSS. Часто мы думаем, что наш CSS изменяет макет, хотя на самом деле это немного искаженный HTML, который делает макет в стиле фанк. Незакрытый DIV здесь, неправильно маркированный CSS-класс … это может быть что угодно. Убедитесь, что ваш HTML проверен еще до того, как вы попытаетесь диагностировать проблему CSS.
6. Не проверять CSS
Раньше я постоянно беспокоил друга за помощь с проблемами CSS, когда пытался свести на нет свои дизайны. Он терпеливо спрашивал меня каждый раз: «Проверяет ли CSS? Если нет, в чем ошибки?» Прошло совсем немного времени, прежде чем я научился проверять CSS, прежде чем я позже попросил Томаса о помощи, и обычно проверка решала проблему для меня.
Если у вас есть действующий код CSS, у вас гораздо больше шансов иметь CSS, который гораздо более совместим с браузерами и с меньшей вероятностью сломается.
7. Использование мамонтовых фоновых изображений
Часто новые дизайнеры будут использовать слишком большие фоновые изображения в своих макетах. Например, используя фоновое изображение размером 3000 пикселей x 5000 пикселей для учета любого возможного размера браузера. Вместо того, чтобы использовать действительно большое изображение, они могли бы использовать действительно крошечное повторяющееся изображение с оттенком магии CSS. Разница огромна: вместо загрузки изображения размером 200 Кб, вы можете загрузить изображение размером всего в несколько байтов и сделать так, чтобы CSS повторял его по всему фону.
Если у вас очень большое фоновое изображение, вы теряете два пути:
- Это означает использование ненужной полосы пропускания
- Вы заставляете посетителя ждать дольше, чтобы загрузить изображение
Иногда большие фоновые изображения неизбежны, особенно с учетом недавней тенденции разработки иллюстративных веб-макетов . Тем не менее, использование повторяющихся изображений или сплошных цветов на заднем плане является гораздо лучшей практикой.
8. Использование CSS для всего
Когда люди впервые узнают о технологии, они воодушевляются ею и хотят использовать ее повсюду, даже если она действительно идет вразрез с тем, что будет работать лучше всего для проекта.
Как веб-разработчики, мы иногда можем быть захвачены желанием технологии сделать что-то передовое и конкретное, хотя на самом деле мы можем использовать другую технологию намного проще. Например, иногда гораздо проще использовать таблицу для организации данных, чем создавать сложный макет на основе CSS с плавающими DIV и тому подобным. Мы должны помнить, что причина, по которой мы используем такие технологии, как CSS, заключается в том, что это должно ускорить время разработки. Когда это начинает замедлять нас, тогда, возможно, мы идем немного за борт.
9. Использование встроенного CSS
Это основной грех для веб-разработчиков, и это происходит чаще, чем вы хотели бы знать. Если вы создаете дизайн, вы почти всегда хотите разделить CSS и HTML. Это гарантирует, что когда (заметьте, я не сказал «если») вы решите изменить дизайн сайта, вам не придется копаться в HTML каждого макета и находить мошеннический CSS-код, прикрепленный к встроенному элементу.
Вместо использования этого:
|
1
|
<a href=»somewhere.html» style=»float:right;color:#333″>link</a>
|
Вы должны переместить бизнес стилей во внешнюю таблицу стилей следующим образом:
|
1
|
<a href=»somewhere.html» class=»link_style»>link</a>
|
Встроенный CSS почти всегда следует избегать. Он прост в использовании и отлично подходит для тестирования, но кроме этого вы, вероятно, не захотите этого в своем рабочем коде.
10. Использование слишком большого количества файлов
Вы когда-нибудь видели дизайн с 12 различными CSS-файлами? Это кошмар для тех, кто пытается внести изменения в ваш макет. Мало того, это замедляет время обработки каждого файла, так как браузер должен сделать запрос для каждого файла. Лучше использовать простую схему CSS, которая использует 1 или 2 файла. Время, потраченное на анализ 12 файлов по сравнению с одним файлом, весьма значительно. Мало того, вы избавите следующего парня, который должен внести изменения в ваш макет, много хлопот.
Никто не хочет открывать 12 файлов, чтобы сделать простое изменение всего сайта!
- Подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные уроки и статьи по веб-разработке.
Вы можете прочитать больше советов по веб-разработке в его блоге Web Jackalope .
Понравился этот пост? Проголосуйте за это на Digg ниже. Благодарность!