2016-12-29
Здравствуйте уважаемый посетитель!
Сегодня рассмотрим на примере созданной веб-страницы как можно проверить сайт на валидность, а именно, на соответствие установленным спецификациям языков HTML и CSS.
Кроме этого, перед тем, как проводить проверку, сделаем некоторую доработку таблицы стилей CSS в части, касающейся "оживления" кнопок сайдбара, где из статических кнопок сделаем интерактивные, меняющие свой внешний вид в зависимости от своего состояния - пассивного, активного и нажатого.
- Делаем кнопки объемными
- Делаем кнопки интерактивными
- Нужна ли валидация
- Как проверять на валидность HTML-код
- Как проверять на валидность CSS-код
- Исходные файлы сайта
В предыдущей статье мы оформили область основного содержания в полном соответствии с макетом главной страницы. При этом, на данный момент в сайдбаре присутствуют кнопки, которые статичны и имеют вид обычного плоского коричневого прямоугольника с закругленными углами.
Ниже показан фрагмент сайдбара с такими кнопками.
Для того, чтобы кнопки "оживить" сначала придадим им с помощью стилей CSS некоторую объемность. И сделаем это с помощью свойства линейного градиента, которое ранее уже использовалось при оформлении блоков ротатора, поиска и подписки.
Значения линейного градиента определим следующим образом:
1. Оттенки цветов будем задавать снизу в верх, начиная с более темного цвета по сравнению с основным цветом кнопки. Чтобы определить какой цвет использовать в начале градиента, используем инструмент графического редактора, в данном случае фотошоп.
Для этого, при открытом документе дизайн-макета, нужно выбрать "Палитру цветов", навести курсор на требуемую область кнопки, определить основной цвет и далее с помощью инструментов "Палитры цветов" подобрать более темный цвет такого же коричневого оттенка. В нашем случае возьмем цвет со значением "653939". Наглядно, как это можно сделать показано на скриншоте ниже.
2. Дальше определим стоп-позицию градиента где начальный, более темный цвет будет переходить в основной. Стоп-позицию разместим примерно в середине. При этом, для того, чтобы сделать более насыщенный цвет, сдвинем стоп-позицию немного вверх, и определим ее значение, скажем в 70% от высоты.
3. И последнее, что нужно сделать для назначения свойств градиента, это определить более светлый цвет по сравнению с основным, который будет окрашивать кнопки в верхней части. Делается это аналогичным образом, как и при определении начального цвета градиента. В данном случае значение этого цвета примем за "b88686".
3. На основании полученных данных добавим линейный градиент к ранее сформированным свойствам CSS кнопок.
input: {
height:30px;
margin-bottom:10px;
border-radius:5px;
background:#a76d6d;
text-align:center;
font-weight:bold;
color:#fff;
float:right;
background-image
Можно отметить, что при определении крайних цветов здесь не указаны стоп-позиции, так как при значениях 0% и 100% это делать необязательно.
Теперь, обновим браузер и посмотрим на результат.
Как видно, кнопки приобрели небольшую выпуклость. Теперь можно приступить к их "оживлению".
Делаем кнопки интерактивнымиДля того, чтобы полноценно работать с кнопками сделаем их интерактивным, что будет визуально отражать их три основных состояния, пассивное (кнопка находится в исходном состоянии), активное (на кнопку наведен курсор) и нажатое (при наведенном курсоре нажата и удерживается кнопка мышки).
И это будем делать с помощью комбинации свойств тени и бордюров. Суть такого приема в том, что меняя цвет тени и бордюров с разных сторон можно добиваться имитации изменения состояния кнопок.
Сначала сделаем это для пассивного состояния и попытаемся изобразить так, что бы кнопки возвышалась над поверхностью.
Цвета бордюров и тени подберем таким же образом, как и в предыдущих случаях.
CSS-код после соответствующих дополнений примет вид.
input: {
height:30px;
margin-bottom:10px;
border-radius:5px;
background:#a76d6d;
text-align:center;
font-weight:bold;
color:#fff;
float:right;
background-image:linear-gradient(to top, #653939, #a76d6d 50%, #b88686);
box-shadow:2px 2px 4px 0px #422a2a;
border-width:2px;
border-style:solid;
border-color:#ddbebe #241616 #241616 #ddbebe;
Здесь можно отметить, что бордюры представлены комбинацией свойств, определяющих толщину (border-width со значением 2px ), стиль (border-style ) со значением, определяющим сплошную рамку и цвета (border-color ) по каждой из четырех сторон.
Обновим браузер и посмотрим как теперь будут выглядеть кнопки.
Как видно, кнопки в этом состоянии как будто приподнялись.
Теперь попытаемся кнопкам придать вид нажатого состояния. Для этого уберем тень, а бордюрам изменим цвет. При этом будем использовать специальный селектор псевдо-класса :hover , соответствующий активному состоянию.
Код CSS для активного состояния кнопок примет следующий вид.
input: hover {
box-shadow:none;
border-color:#a76d6d #a76d6d #a76d6d #a76d6d;
В этом случае бордюрам снова изменим цвет и добавим тень, только в этом случае она будет внутренней и без смещения. Селектор псевдо-класса также изменится на :active , соответствующий нажатому состоянию.
Код CSS для нажатого состояния будет следующим.
input: active {
box-shadow:0px 0px 7px 2px #422a2a inset;
border-color:#777 #fff #fff #777;
Ниже для сравнения показана кнопка "Поиск", где хорошо видно, как она меняет свой вид в зависимости от состояния.
Рис.8 Пассивное состояние
На этом мы закончили верстку главной страницы и привели ее к виду, который соответствует дизайн-макету. А теперь должны, как и ранее на каждом этапе, проверить ее на кроссообразность в разных браузерах. Но перед этим проверим страницу на валидацию, так как состояние кода может в какой-то степени влиять и кроссообразность. Поэтому сейчас выполним эту весьма нужную операцию.
Нужна ли валидацияВалидация - это проверка кода на соответствие установленным стандартам. Различают валидацию на корректность кода HTML и CSS. При этом понятно, что в одном случае проверяется HTML-код, в другом код CSS.
Наверное, многим покажется странным вопрос о том, нужна ли валидация. Но если посмотреть в интернете, то можно увидеть, что есть немало тех, которые считают, что валидный код необязателен, что эта лишняя трата времени, так как браузеры хорошо отрабатывают даже при наличии всякого рода ошибок.
Конечно, во многих случаях и на невалидном коде сайты могут хорошо работать, но кроссообразность в таких случаях точно не получится гарантировать. Ведь существуют стандарты на сами языки программирования, а вот на то чтобы браузеры одинаково исправляли ошибки, такого стандарта, естественно, нет и быть не может. И поэтому, различные браузеры могут отрабатывать ошибки по-разному, что и может приводить к разному отображению страниц.
Да и вообще, непонятно, почему у некоторых людей возникает такое по-фигисткое отношение к своей работе, по принципу "и так сойдет". Поэтому, если кто считает, что ему не нужно проверять код на валидность, то это его право, и вряд ли его можно убедить в обратном, да и незачем.
А теперь перейдем к непосредственной проверке валидности кодов, сначала HTML, затем CSS.
Как проверять на валидность HTML-кодПо существу сама проверка валидации кода довольно простая, в чем сейчас можно будет убедиться. Но, вот устранение ошибок обычно требует определенное время. Конечно, если код состоит из нескольких строк, то трудностей здесь возникнуть не может. Но, если их сотни и тысячи, то здесь может придется потрудиться, все зависит от того как качественно был составлен код. Поэтому, лучше это делать почаще с совместной проверкой на кроссообразность.
Здесь рассмотрим самый простой и наиболее распространенный вариант проверки на валидность - это использование сайта "W3C Консорциум", который при поддержке разработчиков браузеров разрабатывает спецификации кодов веб-страниц.
Для проверки кода HTML достаточно перейти по ссылке https://validator.w3.org/ , где откроется страница с полем ввода адреса проверяемой страницы.
скриншот 51
После нажатия кнопки "Check" получим результат проверки.
В данном случае код HTML валидный, но имеется рекомендация использовать атрибут lang со значением "ru" , так как на странице используется русский язык.
Атрибут lang предназначен для правильного отображения браузерами некоторых символов, например кавычек, в зависимости от используемого языка. Поэтому, совсем нелишним будет нам его включить в код HTML. И сделаем это в теге html для того, чтобы этот атрибут смог действовать на весь документ.
Как сделать это дополнение, показано в следующей таблице.
. . .
И теперь, если мы сделаем повторную проверку, то можно увидеть, что код стал полностью валидным без каких-либо замечаний.
Таким способом мы сделали проверку файла размещенного в интернете. Но когда страница еще не размещена в сети, то можно проверить ее валидность другими способами, это либо загрузить файл используя кнопку обзор, либо воспользоваться формой для непосредственного копирования HTML-кода.
На скриншоте показан последний вариант, когда код веб-страницы скопирован непосредственно в форму для проверки.
После выполнения проверки получаем аналогичный результат, причем здесь будет показываться еще и проверяемый код. В том случае, если будут обнаружены ошибки, то для упрощения поиска они выделятся, что существенно упрощает работу по их устранению.
Мы рассмотрели проверку валидации HTML-кода. Проверка кода CSS проходит в точно таком же порядке. Только при этом нужно использовать другую страницу валидатора, которая для такого случая находится по адресу http://jigsaw.w3.org/css-validator/ .
Откроем ее и также как в предыдущий раз введем адрес проверяемой страницы, после чего нажмем кнопку "Check".
Результат этой проверки приведен на скриншоте.
Как видно, наш CSS-код полностью соответствует спецификации без каких-либо ошибок, что является хорошим результатом.
Порядок остальных способов проверки для этого случая полностью совпадает с подобными проверками для HTML-кода. Поэтому повторяться здесь не будем и на этом закончим рассмотрение проверок на валидацию.
После этого проверим нашу страницу на кроссообразность и убедившись, что она отображается одинаково на всех браузерах, на этом завершим верстку главной страницы сайта.
А, займемся мы этим сразу после Новогодних праздников.
И в заключении, можно всех поздравить с наступающим Новым годом! И пожелать в Новом году здоровья, любви, радости, благосостояния и, конечно, больших успехов в создании своего собственного сайта для возможности успешной работы в интернете!
Исходные файлы сайтаИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов .
В одной из прошлых статей я рассказывал о . Однако, не все знают, что помимо валидатора для HTML , есть валидатор и для CSS .
Значение валидности CSS такое же, как и у HTML: почти не имеет значения. Аналогично с HTML , если Вы будете писать невалидный CSS , то проблем не возникнет (если, конечно, не будет грубых ошибок), однако, валидный код - это всегда хорошо. Такой код чёткий и структурированный, он легко поддаётся пониманию, что также немаловажно, особенно при исправлении, и особенно другими людьми. Также валидность CSS ускоряет процесс обработки, а, следовательно, и скорость загрузки страниц.
И, наконец, ввиду вообще редкого соблюдения валидности, валидный код всегда вызывает уважение, что немаловажно, если Вы занимаетесь этим профессионально.
Чтобы проверить валидность CSS , надо воспользоваться вот этим W3-сервисом : http://jigsaw.w3.org/css-validator/ .
Я сразу скажу, что в отличии от HTML , сделать CSS валидным гораздо проще, поскольку там в основном только грубые ошибки, за исключением , которые лучше вообще избегать.
Подведу итоги. Делать валидным код совсем не обязательно, но я настоятельно рекомендую этим заниматься, так как такой сайт будет легче индексироваться поисковыми системами (валидность HTML ), быстрее работать, проще редактироваться и вызывать уважение со стороны профессионалов.
В последнее время я получила несколько вопросов от пользователей, касающихся валидности моих тем и валидации вообще. В этом посте хочу ответить на них.
Что такое валидность?
Считается, что валидность кода - это единая, универсальная характеристика любого кода.
На самом деле, валидность это соответствие html кода документа определенному своду правил, указанному в доктайпе или подразумеваемому в HTML5
.
То есть, валидность - понятие относительное, поскольку правила бывают разные, и требования у них тоже.
Чтобы было понятнее, приведу пример, который я нашла на сайте css-live.ru
:
К строительству жилых домов и атомных электростанций применяются разные СНиПы (строительные нормы и правила), поэтому документ, валидный по одному своду правил, может быть не валидным по другому (хороша была бы АЭС, построенная по нормативам жилого дома!).
Доктайп обычно указывает на документ, по которому планируется валидация html, но может быть выбран из прагматических соображений для выбора оптимального режима браузеров.
XHTML5 может вообще не иметь доктайпа, но быть валидным.
Простыми словами, валидация - это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).
Как проверяется валидность?Валидность HTML кода проверяется инструментом, который называется валидатором.
Самый известный валидатор w3c - https://www.w3.org
.
Валидатор w3c производит несколько проверок кода.
Главные из них
:
Пример c habrahabr.ru/post/101985 :
является корректным синтаксисом, несмотря на то, что является недопустимым HTML-тэгом
Так что проверка синтаксиса является минимально полезной для написания хорошего HTML-кода.
В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги.
Проверка того, насколько код соответствует указанному DTD - Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа).
Она обнаружит все, что есть в коде, но отсутствует в доктайпе.
Например, пользовательские тэги и атрибуты.
Для проверки валидности CSS кода существует валидатор css - http://jigsaw.w3.org/css-validator
.
Валидность кода
- это результат механической проверки на отсутствие формальных ОВ, согласно указанного свода правил.
Нужно понимать, что валидация - инструмент, а не самоценность.
Верстальщики с опытом обычно знают, где можно нарушить правила валидации HTML или CSS, а где нет, и чем грозит (или не грозит) та или иная ошибка валидации.
Примеры того, когда не валидный код делает сайт:
- более удобным и быстрым - пользовательские атрибуты для Javascrip/AJAX или
- SЕО оптимизированным - разметка ARIA.
Понятно, что в валидности ради валидности нет никакого смысла.
Как правило, опытные верстальщики придерживаются следующих правил:
- В коде не должно быть грубых ошибок.
- Незначительные можно допустить, но только по обоснованным причинам.
В отношении допустимости ошибок валидации html/CSS:
- ОВ в файлах шаблона:
Их не сложно найти и исправить.
Если, какие то из мелких ошибок помогают сделать сайт более функциональным или быстрым, их можно оставить. - ОВ в сторонних скриптах, подключенных на сайте:
Например, виджет Вконтакте, скрипт Твиттера или видео-файлы с ютуб.
Исправить их никак не удастся, поскольку эти файлы и скрипты находятся на других сайтах и у нас нет к ним доступа. - CSS-правила, которые валидатор не понимает:
Валидатор проверяет соответствие кода сайта определенной версии HTML или CSS.
Если вы использовали в шаблоне правила CSS версии 3, а валидатор проверяет на соответствие версии 2.1, то все правила CSS3 он будет считать ошибками, хотя они таковыми не являются. - ОВ, которые поневоле приходится оставлять на сайте, чтобы получить нужный результат. Например:
- теги noindex. Они не валидны, но очень нужны и с этим приходится мириться.
- хаки. Чтобы получить корректное отображение сайта в некоторых браузерах, иногда, приходится использовать хаки - код, который понимает только определенный браузер.
- Ошибки самого валидатора.
Часто он не видит каких то тегов (например, закрывающих) и сообщает об ОВ там, где ее нет.
Получается, что на работающем сайте практически всегда будут какие-то ОВ.
Причем, их может быть очень много.
Например, главные страницы Google , Яндекса и mail.ru содержат по несколько десятков ошибок.
Но, они не ломают отображение сайтов в браузерах и не мешают им работать.
Все написанное выше относится и к моим темам.
- WordPress функции (например the_category()) , которые дают невалидный код.
- Вывод видео с видеохостингов, например, с YouTube, а в коде YouTube очень много ОВ, на которые ни вы, ни я не можем влиять.
- Кнопки социальных сетей, которые подключаются при помощи скриптов этих сетей и содержат ОВ.
- Правила CSS3 и HTML5, которые валидаторы старых версий считают ошибками.
В то же время, валидаторы версий CSS3 и HTML5 считают ошибками старые правила:). - Иногда, чтобы добиться корректного отображения в браузере Internet Explorer или старых версиях других браузеров приходится использовать, так называемые хаки - код, который понимает только определенный браузер, чтобы написать правила отображения сайта именно для этого браузера.
В итоге получить полностью валидный код можно только при верстке очень простых тем, т.е. тем, которые содержат минимальное количество функционала.
После окончания верстки любой своей темы я всегда проверяю ее валидатором и исправляю все ОВ, которые можно исправить без потери работоспособности темы.
Т.е., если стоит выбор между работающим функционалом и валидностью - я выбираю функционал.
Если вы верстаете свои темы, советую поступать так же.
С моей точки зрения (а также, точки зрения большинства верстальщиков) отношение к валидации html/CSS, как к истине в последней инстанции ошибочно. В обязательном порядке нужно исправлять только те ОВ, которые:
- мешают браузеру корректно отобразить страницу (незакрытые и неправильно вложенные теги).
- замедляют загрузку страницы (неправильно подключенные скрипты).
- можно исправить, не нарушая работоспособность темы.
Надеюсь, я ответила на все вопросы о валидации.
Я уже упоминал о том, что существует с точки зрения валидности html кода. Это надо делать хотя бы время от времени, поскольку валидность как html, так и css сильно влияет на сайта, то есть тождественное отображение вашего ресурса в различных браузерах ( о популярных и лучших вэб-обозревателях обобщающая статья, которая, надеюсь, поможет вам сделать выбор в пользу одного из них).
Кроме того, я уже упоминал, несмотря на то, что поисковые системы на данном этапе не учитывают ошибки CSS и HTML кода при ранжировании сайтов, в будущем все может измениться и можно получить ситуацию, когда великолепно оформленный, сделанный для людей проект может лишиться части потенциальной аудитории из-за того, что не прошел валидацию. Ну ладно, это все лирика, здесь каждый для себя решает сам, насколько все важно.
Я думаю, с моим мнением вы теперь знакомы, поскольку я пишу эту статью, а значит считаю это достойным внимания наряду, например, с такой важнейшей частью seo оптимизации как закрытие ссылок и фрагментов текста от индексации Google и Яндекс или грамотным использованием .
Ладно, как говорится ближе к делу. Сначала немного о CSS. CSS (Cascading Style Sheets - Каскадные таблицы стилей) является языком стилей, который определяет отображение HTML документов. То есть если HTML описывает содержимое страницы, то CSS форматирует это содержимое, иными словами придает ему завершенный вид. Кстати, для повышения скорости сайта полезно будет провести файлов вашей темы.
W3C валидатор: проверка валидности кода CSSТеперь перейдем к тому, как осуществить проверку на валидность того или иного документа (странички нашего сайта или блога WordPress). Также, как в случае проверки HTML кода, воспользуемся одним из инструментов . Перейдем на сервис валидации CSS :
Как видите, есть три возможности проверки валидности CSS посредством W3C валидатора. Кстати, обратите внимание, что внизу страницы валидатора есть примечание, которое указывает на необходимость проверки кода HTML на валидность. Только оба правильных кода дают гарантию корректности всего документа. Для проверки вводим URL. Например, проверим главную страницу моего блога:
Итог проверки W3C валидатором в отношении ошибок CSS кода нельзя назвать неутешительным, поскольку обнаружены всего 2 ошибки. Конечно, эти ошибки бывают разными, в каждом конкретном случае они вызывают разные последствия. Посмотрим, как можно поступить для их ликвидации. Здесь все удобно, поскольку W3C валидатор выдает не только ссылку на документ, содержащий некорректный код, но и номер строки, на которой он расположен. Кстати, ниже, после списка предупреждений и ошибок будет отображен вариант корректного кода CSS, которым можно воспользоваться:
На странице результата проверки валидности CSS присутствует ссылка на документ css.ie , который расположен в папке темы. Он был создан для достижения кроссбраузерности блога (одинакового отображения в популярных браузерах). Причем именно для различных модификаций Internet Explorer, который грешит различными ”косяками” в плане искажения вида сайта, особенно его старые версии (IE9 значительно лучше в этом отношении). Кроссбраузерность имеет очень важное значение для продвижения проекта, однако при проверке оказалось, что в этом документе присутствуют свойства, которые не соответствуют стандартам W3C.
Итак, получаем строчки 3 и 12, на которых присутствуют ошибки. Для их исправления следует удалить ошибку разбора html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} и свойство .zoom . Сейчас не буду вдаваться в тонкости программирования и верстки сайтов, замечу только, что свойство expression помогает избавиться от неприятного эффекта мерцания фоновых изображений, которое происходит в IE6.
То есть в браузере, использование которого исходит на нет, а в последующих версиях этого ”глюка” уже не наблюдается. Сразу скажу, что я некоторое время еще буду использовать это ”лекарство”, до тех пор, пока количество потенциальных посетителей, иcпользующих IE6 не достигнет минимального уровня. Однако для наглядности, чтобы показать вам, как на это будет реагировать W3C валидатор, я удалю его.
Свойство.zoom, которое устанавливает коэффициент масштабирования элемента, не являющаяся частью Международного Стандарта W3C, поддерживается совсем старинными версиями браузеров Opera, Safari, в том числе IE8 (9 версия почти полностью ”законопослушная”, так что в скором времени, надеюсь, вебмастера будут освобождены от необходимости использовать хаки , то есть дополнительные коды, позволяющие достичь максимальной кроссбраузерности). Теперь посмотрим на документ, содержащий невалидные элементы и откорректируем его:
Этот документ находится в папке моей темы Cloudy, я удаляю вышеназванные элементы, которые не прошли проверку валидности. Далее, в результатах проверки на валидность, кроме ошибок, оказалась еще масса так называемых предупреждений:
Для примера я постараюсь показать наглядно, как избавиться от самых распространенных из них, ну и попутно, объяснить их значения. Как видим, W3C валидатор предупреждает о наличии одинаковых цветов для текста и фона. Надо сказать, что это вообще-то нежелательно в любом случае, поскольку поисковые системы такое положение вещей могут рассматривать как сокрытие информации, что чревато серьезными санкциями.
Конечно, это не всегда так происходит, однако недооценивать эту опасность нельзя. Итак, переходим непосредственно к исправлению ситуации. Лучше всего скопировать файл style.css вашей темы в HTML и PHP редактор notepad++, о котором я рассказывал и который упрощает поиск по номеру строки:
Теперь мы знаем, где расположены эти строчки в файле вашей темы, корректируем цвет, немного изменив оттенок. В шестнадцатеричной системе цветов #ffffff соответствует белому цвету. Изменяем его следующим образом: вместо последней f вписываем d, таким образом получаем немного другой оттенок белого цвета; теперь изменения для пользователей заметны не будут, однако поисковики увидят разницу:
Вот примерно так можно проводить корректировку невалидных частей кода CSS страничек вашего ресурса. Точно также находим остальные участки, отмеченные предупреждениями и которые необходимо исправить.Что касается предупреждений, касающихся строки 483 (таких оказалось, кстати, немало, порядка 10). При проверке я обнаружил, что их причиной является плагин WP Page Numbers, который обеспечивает постраничную навигацию.
Это подвинуло меня на деактивацию этого плагина и явилось причиной того, что я наконец заменил его внедрением кода, что явилось шажком по направлению к снижению нагрузки на сервер. Как только проделал это, предупреждения, касавшиеся нарушения валидности кода именно этим плагином, при повторной проверке тут же исчезли. После вышеописанных телодвижений проводим повторную проверку валидности CSS с помощью W3C валидатора:
Теперь вы знаете, как проверять валидность CSS документа (вебстраницы сайта или блога), прибегнув к помощи W3С валидатора. Напоследок хотелось бы отметить, что степень и частоту проверки валидности кода CSS каждый для себя решает сам, все зависит от обстоятельств, но тем не менее время от времени это надо делать обязательно, по моему глубокому убеждению. Подписывайтесь на обновления блога для получения свежих материалов на e-mail . Засим разрешите откланяться, надеюсь, расстаемся ненадолго.
Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации - невалидный. Наиболее удобно делать проверку кода через сайт http://jigsaw.w3.org/css-validator/ , с помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Большим плюсом сервиса является поддержка русского и украинского языка.
Проверить URI
Эта вкладка позволяет указывать адрес страницы размещенной в Интернете. Протокол http:// можно не писать, он будет добавлен автоматически (рис. 1.42).
Рис. 1.42. Проверка документа по адресу
После ввода адреса нажмите на кнопку «Проверить» и появится одна из двух надписей: «Поздравляем! Ошибок не обнаружено» в случае успеха или «К сожалению, мы обнаружили следующие ошибки» при невалидном коде. Сообщения об ошибках или предупреждениях содержат номер строки, селектор и описание ошибки.
Проверить загруженный файл
Эта вкладка позволяет загрузить HTML или CSS-файл и проверить его на наличие ошибок (рис. 1.43).
Рис. 1.43. Проверка файла при его загрузке
Сервис автоматически распознает тип файла и если указан HTML-документ, вычленяет из него стиль для валидации.
Проверить набранный текст
Последняя вкладка предназначена для непосредственного ввода HTML или CSS-кода, при этом проверке будет подвергнут только стиль (рис. 1.44).
Рис. 1.44. Проверка введенного кода
Этот вариант представляется наиболее удобным для проведения различных экспериментов над кодом или быстрой проверки небольших фрагментов.
Выбор версии CSS
В CSS3 добавлено много новых стилевых свойств по сравнению с предыдущей версией, поэтому проводить проверку кода следует с учетом версии. По умолчанию в сервисе указан CSS2.1, так что если вы хотите проверить код на соответствие CSS3, это следует указать явно. Для этого щелкните по тексту «Дополнительные возможности» и в открывшемся блоке из списка «Профиль» выберите CSS3
Рис. 1.45. Указание версии CSS для проверки
Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В действительности нет разницы, через что задавать стили, но следует помнить о некоторых особенностях идентификаторов и классов, а также подводных камнях, которые могут поджидать разработчиков.
Для начала перечислим характерные признаки этих селекторов.
Идентификаторы
В коде документа каждый идентификатор уникален и должен быть включён лишь один раз.
Имя идентификатора чувствительно к регистру.
Через метод getElementById можно получить доступ к элементу по его идентификатору и изменить свойства элемента.
Стиль для идентификатора имеет приоритет выше, чем у классов.
Классы могут использоваться в коде неоднократно.
Имена классов чувствительны к регистру.
Классы можно комбинировать между собой, добавляя несколько классов к одному тегу.
Идентификаторы
Если во время работы веб-страницы требуется изменить стиль некоторых элементов «на лету» или выводить внутри них какой-либо текст, с идентификаторами это делается гораздо проще. Обращение к элементу происходит через метод getElementById , параметром которого служит имя идентификатора. В примере 1.70 к текстовому полю формы добавляется идентификатор с именем userName , затем с помощью функции JavaScript делается проверка на то, что пользователь ввёл в это поле какой-либо текст. Если никакого текста нет, но кнопка Submit нажата, выводится сообщение внутри тега с идентификатором msg . Если всё правильно, данные формы отправляются по адресу, указанному атрибутом action .
Пример 1.70. Проверка данных формы XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
Проверка формы
function validForm (f) {
user = document.getElementById("userName"); if (user.value == "")
document.getElementById("msg").innerHTML = "Пожалуйста, введите имя."; } else f.submit();
Введите свое имя:
Поскольку идентификаторы чувствительны к регистру, имеет значение их однотипное написание. Внутри тега используется имя userName , его же следует указать и в методе getElementById .
При ошибочном написании, например, username , скрипт перестанет работать, как требуется.
В примере выше стили вообще никакого участия не принимали, сами идентификаторы требовались для работы скриптов. При использовании в CSS следует учитывать, что идентификаторы обладают высоким приоритетом по сравнению с классами. Поясним это на примере 1.71.
Пример 1.71. Сочетание стилей |
|||||||||||||
xmlns= "http://www.w3.org/1999/xhtml"> |
|||||||||||||
Стиль идентификатора |
|||||||||||||
class= "a b" > Стиль классов a и b |
|||||||||||||
class= "b" > Стиль класса b |
|||||||||||||
Для первого абзаца устанавливается стиль от идентификатора A и класса b , свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться из-за особенностей каскадирования и специфичности. Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в стиле ниже. К последнему абзацу применяется стиль только от класса b . На рис. 1.46 показан результат применения стилей.
Рис. 1.46. Использование стилей для текста
Специфичность в каскадировании начинает играть роль при разрастании стилевого файла за счет увеличения числа селекторов, что характерно для больших и сложных сайтов. Чтобы стиль применялся корректно, необходимо грамотно управлять специфичностью селекторов путем использования идентификаторов, повышения важности через !important , порядком следования свойств.
Поскольку к элементу одновременно можно добавлять более одного класса, это позволяет завести
несколько универсальных классов со стилевыми свойствами на все случаи и включать их к тегам при необходимости. Предположим, что большинство блоков на странице имеют закругленные уголки, причем некоторые блоки еще имеют красную рамку, а некоторые нет. В этом случае можем написать такой стиль (пример 1.72).
Пример 1.72. Использование классов
R, .b { padding : 10 px ;
} background: #FCE3EE ;
border-radius: 8 px ; -webkit-border-radius: 8 px ;
} -moz-border-radius: 8 px
B { border : 1 px solid #ED1C24 ; }
N { border : none ; }
Указывая разные классы в атрибуте class мы можем комбинировать набор стилевых свойств и получить таким образом блоки с рамкой, блоки без рамки, со скругленными или прямыми уголками. Это несколько похоже на группирование селекторов, но обладает большей гибкостью.
