Резюме
- CSS не нужен для создания красивых сайтов; HTML обеспечивает структуру, а браузеры используют соответствующие стили по умолчанию.
- Разрабатывайте веб-страницы, уделяя особое внимание семантике с помощью правильных HTML-тегов.
- Используйте минимум HTML и проверяйте код для создания чистого и надежного веб-дизайна.
Вы, возможно, уже знаете, что CSS — это важная технология для стилизации ваших веб-страниц. Но вам не обязательно ее использовать, и ваши сайты могут выглядеть хорошо и без нее.
Как CSS и HTML работают вместе?
Если вы узнали о сети Интернет давно или самостоятельно изучили ее основы, вы, возможно, привыкли использовать HTML и CSS, не задумываясь о том, что они делают.
HTML (язык гипертекстовой разметки) — для смысла. Это описательный язык, который вы используете для аннотирования своего контента с помощью таких тегов, как p и (см. таблицу ниже). Эти теги определяют структуру и семантику текста внутри них:
Простой абзац
со слегка подчеркнутым текстом
и сильно выделенный текст .
CSS (Cascading Style Sheets) — это язык для представления. Он определяет форматирование вашего контента, используя такие свойства, как размер шрифта и цвет:
р { цвет: rgb(100, 100, 100); }
#реклама { border-width: 4px; }
Четкое разделение HTML и CSS дает несколько преимуществ:
- Каждый формат понятнее и удобнее для чтения, чем оба вместе взятые.
- Вы можете менять файлы HTML и CSS независимо друг от друга. Это означает, что вы можете изменить весь дизайн своих веб-страниц одним небольшим изменением, и вы можете использовать одну таблицу стилей, чтобы применить один и тот же дизайн ко многим разным страницам.
- Поскольку многие файлы HTML могут ссылаться на один файл CSS, избыточность снижается, и файлы становятся меньше.
- Эксперты в HTML или CSS могут работать с технологией, которую они знают лучше всего. Эту работу можно выполнять параллельно, поэтому более крупные проекты могут быть намного эффективнее.
Это разделение также означает, что веб-странице не нужен CSS для отображения. Фактически, когда-то веб-страницы не использовали CSS. Веб-браузер использует разумные значения по умолчанию для отображения HTML на основе значения его тегов.
Например, даже без явного стиля элемент H1 все равно имеет вид по умолчанию. Поскольку это основной заголовок на странице, имеет смысл сделать его большим и жирным, с соответствующим вертикальным пространством для дыхания:
Как создать надежный сайт с помощью прогрессивного улучшения
При создании дизайна важно помнить о семантике HTML. Всегда следует использовать тег, который лучше всего описывает ваш контент, независимо от того, как он отображается в вашем браузере. Если вы используете соответствующие теги, ваш контент должен быть по крайней мере читабельным, даже без CSS вообще.
Вы можете подумать, что CSS, который вы предоставляете, всегда будет доступен, но есть исключения, которые вы должны предусмотреть. К ним относятся сетевые проблемы на стороне клиента, ошибки сервера или неправильная конфигурация, ошибки браузера (включая расширения) или решение посетителя отключить CSS. Ваш посетитель может даже использовать текстовый браузер, который вообще не обрабатывает CSS. Также учтите слабовидящих пользователей: чем более независимы ваши HTML и CSS, тем проще им будет потреблять ваш контент.
В качестве примера представьте, что у вас есть набор абзацев, которые вы хотите превратить в маркированный список:
lorem ipsum dolor sit amet
lorem ipsum dolor sit amet
lorem ipsum dolor sit amet
Один из подходов — использовать CSS для добавления символа маркера в начало каждого абзаца:
p:before { content: ‘• ‘; }
Это похоже на маркированный список, так что на первый взгляд все выглядит нормально:
Но если удалить CSS, браузер просто вернется к отображению обычного набора абзацев:
Конечно, в этом случае решение простое: использовать правильный тег для маркированных списков (ul), что HTML обеспечивает:
lorem ipsum dolor sit amet
lorem ipsum dolor sit amet
lorem ipsum dolor sit amet
Это немного сложнее, чем разметка абзаца, но эта дополнительная детализация дает преимущества: ваш HTML теперь более описателен и передает смысл контента. В результате браузер может отображать вашу страницу так, как задумано, даже без CSS:
Вы по-прежнему можете использовать CSS для настройки дизайна, возможно, используя другой стиль маркера, добавив дополнительные интервалы или используя другой шрифт. Но вы должны наложить этот стиль поверх чистого, надежного HTML, чтобы обеспечить наилучшую возможную основу.
Приведенный выше пример запутан, поэтому давайте рассмотрим другой: ссылки. Часто вам нужно будет включить ряд ссылок на вашу страницу, возможно, как набор ссылок или ссылок в нижнем колонтитуле:
О
Контакт
Работа
Условия
По умолчанию ссылки отображаются как встроенные блоки, поэтому длинный набор будет отображаться на одной строке до тех пор, пока не будет выполнен перенос:
Это может быть то, что вам нужно в нижнем колонтитуле, поэтому с помощью небольшого CSS вы можете добиться желаемого вида:
{
текстовое оформление: нет;
цвет фона: #eee;
черный цвет;
заполнение: 0.5em 1em;
семейство шрифтов: helvetica;
размер шрифта: 150%;
поле: 0 0.5em;
Дисплей: встроенный блок;
}
Этот базовый стиль делает ссылки похожими на вкладки с измененным шрифтом, фоном и интервалами:
Однако без CSS страница будет отображаться как оригинальный однострочный блок текста, который не очень удобочитаем. Если ссылки состоят из нескольких слов, с ними еще сложнее иметь дело:
Встроенный дисплей, интервал и размер шрифта по умолчанию приводят к тому, что эти ссылки накладываются друг на друга, что затрудняет их различение на первый взгляд. Однако эту проблему можно решить с помощью более семантического HTML:
О
Контакт
Работа
Условия
Теперь, без CSS, даже список длинных ссылок легко читается:
Вам может понадобиться одно или два дополнительных правила CSS, чтобы отменить стили списка по умолчанию, но это небольшая плата за более чистый HTML и лучший опыт без CSS.
Методы чистого HTML и CSS
Использование минимального семантического HTML имеет много преимуществ, помимо простого обеспечения безопасности ваших страниц для доступа без CSS. Поисковые системы часто вознаграждают чистую разметку, и это также помогает инструментам доступности, таким как программы чтения с экрана, работать лучше.
Познакомьтесь с тегами HTML
Ознакомьтесь со стилем HTML по умолчанию для различных тегов. Этот проект GitHub является хорошим примером, который включает в себя множество различных тегов. Вы можете просмотреть полученную страницу, чтобы увидеть их рендеринг по умолчанию.
Избегайте устаревших тегов
Некоторые теги — например шрифт — презентационные по своей природе, поскольку они являются пережитком эпохи до CSS, когда они были единственным средством изменения форматирования веб-страниц. Вам следует избегать этих тегов, поскольку они являются чисто стилистическими и не имеют семантической ценности.
Подтвердите свой код
Обязательно проверьте ваш HTML и CSS, используя службу, например, валидатор W3C. Это предупредит вас об устаревших тегах и других ошибках, которые могут сделать ваш HTML менее надежным.
Вы также можете использовать сайт, например Can I use, который содержит подробную информацию о поддержке браузерами различных HTML-тегов и свойств CSS.
Протестируйте свои страницы без CSS
Подумайте об использовании расширения, например Web Developer, которое позволяет легко включать и выключать CSS. Это отличный способ проверить, как будет выглядеть версия вашего сайта без CSS, одним нажатием кнопки.
Вы также можете проверить свои страницы в текстовом браузере, например Lynx, чтобы узнать, насколько они читабельны без CSS.
