А вы совершаете эти 10 CSS-ошибок?

Работа с CSS может казаться нескончаемой борьбой. Браузеры всегда меняют способ чтения кода, и кажется, что есть множество мелких CSS штучек. Хотя это и невероятно мощный язык, он легко может использоваться неправильно, и обрести интересный проект влачить инвалидное существование. Давайте набираться ума!

1. Игнорирование совместимости с разными браузерами.

Это, видимо, самая основная проблема при веб-разработке, когда вам необходимо добиться, чтобы ваш сайт выглядел одинаково, каким бы браузером его не открывал пользователь. Этот факт часто травит душу: есть разница между тем как обрабатывает код Internet Explorer, собирая страницу, и например, Firefox.

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

2. Не принимают в расчёт маленький размер браузера.

В основном у вебразработчиков широкие мониторы – и мы горды этим – но какая-то часть посетителей вашего сайта может не разделять ваше настроение. Можно посмотреть статистику какими браузерами открывали сайт и подивиться разбросу (Google Analytics предоставляет такую возможность подивиться). Однако, есть огромная разница в том, как выглядит дизайн на разрешении 1024×768 пикселей и 800×600. Даже красивейшее оформление пожет подиспортиться и стать уродливым.

Расчёт и на меньшие размеры означает, что все посетители будут счастливы и найдут то, что ищут у вас.

4. Не используем Универсальные классы?

Конечно проще не загадывать вперёд, когда мы создаём сайты. Но часто мы обзываем наши CSS-классы по разному в разных разработках, в то время как куда более проще создать простой класс, который мы сможем потом использовать, не залезая в дальний ящик. И тогда мы будем уверены, что дизайн не будет оставаться таким каким мы задумали.

Вы можете использовать Универсальный класс, например:

.right{float:right}

Чтобы вещи выравнивались правильно. Тогда вы задаёте стиль блока DIV ID, например:

<div id="block_text" class="right"></div> 

Я обычно использую по крайней мере 3 универсальных класса, когда составляю макет:

.clear{clear:both} 
.right {float: right} 
.left{float:left} 

	.clear{clear:both}	.right{float:right}	.left{float:left}

5. Валидный (грамотный) HTML

Спорю, что вы не знали о том, что проверка вашего HTML кода может также влиять на ваш CSS, не так ли? Первое и главное: вы не можете проверить ваш CSS на валидность, пока не проверили HTML. Второе, много случаев, когдо проблемы именно в HTML, а не в CSS. Не закрыли DIV здесь, не прописали правильно название CSS класса… всё что угодно может быть.

6. Проверка CSS на валидность (корректность).

7. Гигантские фоновые картинки

Очень частоа молодые дизайнеры вставляют большие картинки фоном в свои макеты. Например, 3, 000px X 5, 000px , чтобы охватить все возможные размеры браузеров . Вместо этого можно использовать повторяющуюся маленькую картинку с некоторой магией CSS. Разница велика: вместо загрузки 200 Кб картинки, загружаться будет картинка весом несколько байтов и множиться с помощью CSS.

8. CSS для всего

Когда люди только узнают о CSS-технологии, они очень рады и хотят повсюду её применять, даже там, где это неоправданно лишне.

Как вебразработчики мы хотим использовать технологию для чего-то лучшего и сложного, в то время как дело решается гораздо проще обычными средствами. Например, иногда проще использовать таблицу а не блоки div? которые замучаешься выравнивать как надо. Нам следует помнить, что мы используем CSS чтобы ускорить затраты по времени на вёрстку . Когда это замедляет нас, наверное мы переборщили.

9. Встроенный (Inline) CSS

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

Вместо этого используйте (в случае отладки, или теста):

<a href="somewhere.html" style="float: right; color: rgb(51, 51, 51);">link</a> 

link

Разделить стили и дизайн, создав класс:

<a href="somewhere.html" class="link_style">link</a>

link

10. Избыток CSS файлов.

Вы когда нибудь видели дизайн с 12 разными CSS файлами вызываемыми в макете? Это кошмар длялюбого, кто захочет вносить изменения в них. А также это замедляет загрузку, так как браузер тратит время на запрос каждого файла в отдельности. Лучше использовать простой CSS - один или два файла. Время на подгрузку 12 файлов и одного - разные значительно. Никому не захочется открывать все 12 файлов и искать нужный стиль!