Проверка на ошибки css: Проверка CSS, онлайн проверка CSS

Как проверить CSS на ошибки

Главная > Учебник CSS >

При работе в любом языке трудно не допускать ошибок. Поиск ошибок иногда требует много времени и усилий, особенно у новичков. Чтобы проверить CSS на ошибки, браузеры предоставляют различные средства разработки. Лучше всего они сделаны в FireFox. Они открываются так:

• Oткройте основное меню браузера.
• Прокрутите его вниз и нажмите «Другие инструменты».
• В открывшемся меню нажмите «Инструменты веб-разработчика»

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

Чтобы каждый раз не открывать главное меню, можно добавить значёк Инструментов разработчика в панель инструментов браузера. Делается это так:

• Oткройте основное меню браузера.
• Нажмите «Другие инструменты».
• В открывшемся меню нажмите «Настройка панели инструментов»
• Откроется страница со значками инструментов. Найдите на ней значёк Инструментов разработчика. Перетащите его в панель инструментов, как показано на картинке

Для отладки CSS кода запустите страницу в FireFox и откройте Инструменты разработчика. Сначала нужно узнать, какие стили видит браузер. Для этого откройте вкладку «Стили».

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

Затем нужно выяснить, какие свойства видит браузер у элемента, который отображается неправильно. Для этого в Инструментах разработчика есть вкладка «Инспектор».

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

У правой части инспектора есть свои вкладки. Основная вкладка «Правила». В ней отображаются все свойства, которые применяются к элементу. Также в ней указано, каким способом элемент получил эти свойства.

Некоторые свойства могут быть зачёркнуты. Это означает, что данное свойство не применяется к элементу. Это может быть по двум причинам:

1. При написании CSS свойства или значения допущена ошибка
2. Свойство отменено более приоритетным селектором

Если Вы наведёте указатель мыши на какое-то свойство, то напротив него появляется галочка. Её можно убрать. Тогда свойство тоже становится зачёркнутым. Это позволяет проверить, как элемент выглядит без этого свойства.

В правой части инспектора есть вкладка «Разметка». В ней показаны реальные размеры элемента, которые он имеет в данный момент. Также показаны отступы. Размеры указываются в пикселях. Они могут иметь дробную часть. Это связано с особенностями вычислений.

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

Проверка CSS на валидность

Добро пожаловать на Блог Свободного Вебмастера! В прошлый раз я рассказывал как проверить валидность HTML кода, а сегодня предлагаю продолжить тему валидации веб-страниц. Проверим каскадные таблицы стилей (CSS) и документы HTML с таблицами стилей на соответствие общепринятым интернет-стандартам.

Разработчиком языка стилей CSS является Консорциум Всемирной паутины (World Wide Web Consortium, сокращённо W3C) — это организация, которая разрабатывает и внедряет технологические стандарты в интернете.

CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) — это формальный язык, предназначенный для описания внешнего вида документа с использованием языка разметки.

Для проверки стилей существует очень полезный сервис, который предлагает Консорциум W3C. Давайте перейдём на главную страницу сервиса CSS Validation Service и проверим валидность CSS.

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

Здесь нас ждёт приятное удивление, всё на русском языке! Кроме того, есть возможность выбора любого другого языка из более 20 доступных. На странице расположены вкладки, предлагающие выбрать вариант проверки:

1. Проверить по URI — достаточно указать адрес страницы;
2. Проверить загруженный файл — требуется выбрать локальный файл CSS;
3. Проверить набранный текст — нужно ввести код CSS для проверки на корректность.

Дополнительные возможности позволяют указывать параметры расширенной проверки. Привожу краткую справку по каждому из них:

• Профиль — перечисляет все особенности и возможности реализации на конкретной платформе. Выбор по умолчанию соответствует наиболее часто используемому стандарту третьего уровня CSS3.
• Предупреждения — настройка подробности отчётов: все или наиболее важные предупреждения, обычный отчёт, без показа предупреждений. Сервис может выдавать два типа сообщений: ошибки и предупреждения. Если проверяемый CSS не соответствует рекомендации — это ошибка. Предупреждения отличаются от ошибок тем, что не относятся к проблемам выполнения спецификации.
• Среда — указать где применяются стили, например, на портативном устройстве, дисплее, телевизоре или странице для печати. Рекомендуется проверять все среды применения стилей.
• Расширения поставщика — желательно оставить по-умолчанию, есть возможность отображения только ошибок или только предупреждений. Поставщики браузеров иногда реализуют экспериментальные CSS свойства, для их поддержки используются префиксы: -moz- (для Firefox), -webkit- (для Chrome), -ms- (для Internet Explorer), -o- (для Opera) и другие.

Указываю URL адрес, настраиваю дополнительные параметры проверки и нажимаю на кнопку «Проверить» для старта. Ура! Результат проверки CSS: ошибок не обнаружено!

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

Главное, что стили не содержат ошибок, а расширения поставщика, скорее всего, просто не занесены в спецификацию и вызывают предупреждения, но браузер при этом корректно обрабатывает данные.

Обратите внимание, в списке предупреждений приведён номер строки, в которой найдено неизвестное свойство. При обнаружении ошибок вы увидите таблицу со свойством и описанием проблемы. Например, такой результат проверки имеет главная страница Яндекса:

Ниже представлена информация о корректном проверенном CSS. Не спешите его копировать и использовать на своём сайте! Да, в приведённом варианте корректного CSS нет ошибок и свойств, использование которых вызывает предупреждения, код 100% пройдёт полную проверку. Но эффект достигается путём удаления этих свойств, поэтому на сайте могут возникнуть проблемы с отображением или ожидания не совпадут с реальностью.

Данный сервис размещается и обслуживается на сервере W3C, но в то же время не является официальным инструментом проверки CSS.

При желании, воспользуйтесь совмещенным валидатором Unicorn — он проверяет весь документ, объединяя на одной странице результаты проверки HTML и CSS валидаторов, а также других полезных инструментов.

При веб-разработке сайтов обращайтесь к актуальным спецификациям и справочникам по таблицам каскадных стилей. Рекомендую воспользоваться валидатором CSS и проверить свой сайт, делитесь результатами в комментариях!

CSS Lint

Заденет ваши чувства*

(И поможет вам писать код лучше)

Делаем ворсинки…

CSS lint found 0 ошибок и 0 предупреждений. Как это исправить? Подробнее см. ниже.

Перезагрузка

Здесь находится ваш CSS. Чем больше, тем лучше. Linting работает лучше всего, когда мы видим общую картину, так что предоставьте нам все, что у вас есть.

• Ворсинки!
• Опции

Ниже вы можете выбирать, какие ошибки и предупреждения проверять. ^{(Все) | (Нет)}

Ошибки

^{(Все) | (Нет)}

•  Остерегайтесь неправильного размера коробки
•  Требуются свойства, подходящие для дисплея
•  Запретить повторяющиеся свойства
•  Запретить пустые правила
•  Требовать использования известных свойств

Совместимость

^{(Все) | (Нет)}

•  Запретить смежные классы
•  Запретить box-sizing
•  Требуются совместимые префиксы поставщиков
•  Требовать все определения градиента
•  Запретить минус text-indent
•  Требуется стандартное свойство с префиксом поставщика
.
•  Требовать резервные цвета
•  Запретить взлом звезды
•  Запретить взлом подчеркивания
•  Пуленепробиваемый @font-face

Производительность

^{(Все) | (Нет)}

•  Не используйте слишком много веб-шрифтов
•  Запретить @импорт
•  Запретить дублирование фоновых изображений
•  Запретить селекторы, похожие на регулярные выражения
•  Запретить универсальный селектор
•  Запретить неквалифицированные селекторы атрибутов
•  Запретить единицы для 0 значений
•  Запретить чрезмерно квалифицированные элементы
•  Требовать сокращенные свойства

Ремонтопригодность и дублирование

^{(Все) | (Нет)}

•  Запретить слишком много чисел с плавающей запятой
•  Не используйте слишком много размеров шрифта
•  Запретить идентификаторы в селекторах
•  Запретить !важно

Специальные возможности

^{(Все) | (Нет)}

•  Запретить схема:нет

OOCSS

^{(Все) | (Нет)}

•  Запретить квалифицированные заголовки
•  Заголовок должен быть определен только один раз

Подробнее о правилах

Онлайн-валидатор CSS — BeautifyTools.

No related posts.