Полтора часа жизни ушли на то, чтобы вывести фоновое изображение. Казалось бы, простая задача и решаемая всего в одну строчку, но ведь не работает. Причина оказалась банальной, опечатка в имени файла. Чтобы вы не повторяли мои ошибки, решил написать эту статью.
В этой публикации собраны 6 самых банальных ошибок при верстке сайтов, которые очень легко допустить, но не так-то просто их найти. Причем главная проблема с выявлением данных ошибок в том, что чем более опытным верстальщиком себя считаешь, тем меньше ожидаешь такого глупого промаха.
1. Опечатки в коде
Ошибка, от которой никто не застрахован. Так уж устроена вся система верстки сайтов, что пропуск точки с запятой, кавычек, или слеша приводит к полному краху сайта. Особенно, если ошибка будет допущена в одном из шаблонов для CMS.
Современные инструменты для разработки веб-сайтов быстро находят и подсвечивают подобные ошибки. Нужно просто не лениться запускать их, даже если нужно выполнить ну очень простую задачу. А также всегда обращайте внимание на индикатор ошибок, перед тем как нажать сохранить.
2. Ошибки в именах файлов
Эта проблема характерна для подключения фоновых и обычных изображений, а также для указания ссылок. Важно помнить, что браузеры не любят и воспринимают некорректно:
• кириллицу;
• пробелы;
• знаки пунктуации или специальные символы.
Чтобы вы не оказались в той ситуации, в которой я был, перед тем как заняться этой статьей, советую всегда придерживаться следующих принципов. Все имена файлов прописывать только латинскими буквами, можно использовать транслит. Если в названии файла два или больше слов, то разбивайте их не пробелами, а дефисами или подчеркиваниями. Кстати поисковики тоже любят именно такой формат. Ну а чтобы угодить еще и поисковому роботу, то название файла должно соответствовать его сути, а не представлять собой абракадабру из букв и цифр. При добавлении имени файла в код, задайте его переименование, скопируйте точное название, и затем вставьте в нужное место. Такая примитивная хитрость может существенно упростить вам жизнь.
3. Лишние div
Часто в погоне за блочной версткой может наблюдаться картина клонирования совершенно не нужных div. В них оборачивают списки, параграфы, картинки и ссылки, при этом такие действия в большинстве случаев не оправданы. Чтобы задать строчному элементу качества блочного, достаточно прописать это в css файле, также классы и идентификаторы могут быть присвоены любым другим элементам, кроме div.
Данная ошибка по факту не ошибка. Она усложняет чтение кода, наполняет его ненужными блоками и усложняет работу с css, но к фатальным последствиям не приводит. Но учтите, что каждый не нужный тег, это шаг к совершению глупой и грубой ошибки, о которой мы поговорим в следующем пункте.
4. Нарушение принципа блочной верстки
Появление блочной или как еще принято говорить div-ной верстки, существенно облегчило всем жизнь и расширило возможности, в сравнение с предыдущими таблицами. Главный ее принцип в том, что в больший контейнер укладывается меньший, такая себе матрешка. Но на практике в одном блоке может находиться несколько вложенных блочных или линейных контейнеров, из-за чего может возникнуть путаница. Классическая формула «abba», на практике часто превращается в «abbbba» и более сложные формы типа «abccbbccbppa». Чем сложнее данная структура, тем больше вероятность нарушить принцип вложенности и как результат поедет вся архитектура.
Хорошо, что есть современные средства разработки и не нужно больше писать код в блокноте, в них в виде подсказок отображены блоки, и проследить структуру можно. Также если вы ведете разработку непосредственно в интернет на тестовом домене, то на такую ошибку очень быстро укажет валидатор, с точностью до номера строки кода в которой ошибка. А если работаете на виртуальной машине, то просто скопируйте код и вставьте в тот же валидатор, так тоже можно.
5. Единицы измерения
В большинстве случаев, задавая размеры блоков или шрифтов в css файле, мы используем пиксели (px), просто это наиболее удобная единица измерения. Но браузер знает и другие единицы, такие как %, em и ex и как браузер интерпретирует это числовое значение без точно проставленной размерности неизвестно. Такая ошибка опасна еще и тем, что один браузер поймет вас правильно, и при проверке проект будет выглядеть как надо, а вот программа заказчика сделает все по-своему, и у него сайт поплывет. А ведь лишних проблем можно было избежать, просто поставив нужную размерность.
6. Ошибки классов и идентификаторов
Очень простая, но не всегда легко находимая ошибка, т.к. надо поднимать файлы html и сравнивать их с css. Мы знаем, что для блоков с общими свойствами задаются классы (class), а для уникальных контейнеров присваивается уникальный идентификатор (id). Все очень просто, но в html эти блоки мы помечаем соответствующими словами class/id, а в css используем обозначение для класса «.» и «#» для id. Все тоже максимально просто, вот только перепутать два знака не составляет труда. Если будет нестыковка между файлами html и css, то браузер просто не поймет что нужно делать и мы не получим ожидаемого результата.
Совет вместо выводов
Если сайт плывет, шрифты не подключаются, изображения не грузятся, а скрипты не работают, не спешите устраивать мозговой штурм и искать ошибку в логике вашего кода. Потратьте 5 минут на поиск банальных ошибок, начиная с опечаток, и возможно вы сэкономите несколько часов своей жизни и приличный кусок нервов.
