Сила CSS3. Освой новейший стандарт веб-разработок!

Сила CSS3. Освой новейший стандарт веб-разработок!
Автор: Зои Джилленуотер
Год: 2012
ISBN: 978-5-459-01206-4
Страниц: 304
Язык: Русский
Формат: PDF
Размер: 18 Мб

Download

CSS3 – новейший стандарт веб-разработок, значительно расширяющий функциональные возможности языков веб-программирования и позволяющий реализовать оригинальные визуальные решения для ваших интернет-проектов. С помощью CSS3 вы сможете создавать такие привлекательные эффекты, как полупрозрачные фоны, градиенты и тени; использовать оригинальные шрифты, обычно не применяющиеся в Сети; внедрять на сайтах анимацию без использования Flash; предоставить пользователям возможность персонифицировать дизайн сайта без применения JavaScript. Вы узнаете, как средствами CSS реализовать множество практических задач, решая по ходу работы с книгой разнообразные учебные примеры.
Как создать потрясающий дизайн с уникальной типографикой и графическими элементами? Как использовать CSS3 для улучшения юзабилити вашего сайта? Как обеспечить поддержку новых возможностей CCS3 для устаревших браузеров? Как создавать веб-дизайн для мобильных версий сайта? Ответы на эти и многие другие вопросы вы найдете в данной книге.

+

Чта такое селекторы атрибутов?

Для стилизации ссылок и изображений в зависимости от типа мы будем использовать селекторы атрибутов. Мощь селекторов атрибутов заключается в том, что они позволяют обращаться к определенным элементам, не используя идентификаторы или классы HTML. Для того чтобы обратиться к элементу, нужно всего лишь знать, есть ли у него определенный атрибут, а также возможно ли обращение по значению этого атрибута.
К примеру, селектор img[alt] составлен из селектора типа img, за которым следует селектор атрибута [alt]. Квадратные скобки используются для обозначения всех селекторов атрибутов, но содержимое квадратных скобок зависит от того, к какому элементу вы желаете обратиться. Селектор img[alt] позволяет выбрать все элементы img, у которых есть атрибут alt. Его удобно применять во время тестирования страниц: добавьте ко всем изображениям, имеющим атрибут alt, ярко-зеленую рамку, и вы сразу же увидите изображения без рамок, требующие добавления атрибута alt.

img[alt] {
border: 3px solid #0C0;
}
<img src=”photos/poe.jpg” width=”320″ height=”241″
¬ alt=”My cat Poe”>
<img src=”photos/dog.jpg” width=”320″ height=”240″>

Селектор img[alt] — это пример простейшего типа селекторов атрибутов, проверяющего только наличие атрибута, но не его значение. В спецификации CSS 2.1 предусмотрено четыре типа селекторов атрибутов.
В версии CSS3 появилось три новых селектора атрибутов, обеспечивающих более высокую степень контроля над выбором элементов. Принцип написания и работы селекторов атрибутов проще всего понять на живых примерах, поэтому давайте добавим селекторы на нашу страницу, посмотрим на результаты и подумаем, какое еще практическое применение для них можно придумать.
….

Обозначение типа файла с помощью динамически добавляемых значков

Для начала загрузите файлы упражнений для этой главы с сайта и откройте файл selectors_start.html в любом редакторе кода. Код CSS содержится внутри элемента style тега head страницы. Это та же страница, с которой мы работали в главе 3, поэтому вы можете продолжить работу с файлом, который у вас получился в конце предыдущей главы.
На этой странице встречаются ссылки для загрузки документов следующих типов: PDF, MOV, DOC, JPG.
В некоторых случаях я указываю тип файла в скобках в конце текста ссылки, например «Map of trip locations (PDF)». Я хочу заранее предупредить пользователя о том, что щелчок на ссылке может привести к запуску дополнительного приложения, такого как Acrobat Reader, или появлению окна с запросом на сохранение файла. Но я тоже человек и могу забыть о некоторых ссылках, и не добавить к ним такое краткое описание. Что произойдет, если клиент, не знакомый с технической стороной дела, решит сам добавить ссылки, а страница входит в систему управления содержимым (content management system, CMS)? Ему даже в голову не придет мысль об описаниях к ссылкам.
Намного более надежный способ добавления индикаторов типа файла основывается на использовании селекторов атрибутов — в этом случае всю работу автоматически выполняет браузер. Все ссылки заканчиваются расширениями файла, однозначно указывающими на тип файла, поэтому мы можем с помощью селектора атрибута «конец значения» определить вид расширения и добавить соответствующий значок в качестве фонового изображения элемента a. Прежде всего, необходимо подготовить к добавлению фоновых изображений элементы a из списков файлов для загрузки:

ul a {
display: block;
min-height: 15px;
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0 3px;
}

В этом коде мы создаем для ссылок блочные элементы, минимальная высота которых равняется высоте значков, чтобы значки не обрезались сверху и снизу. Кроме того, мы добавляем поле слева — в это пустое пространство будет вставляться сам значок. Каждое фоновое изображение будет выводиться только один раз (no-repeat) на три пиксела ниже верхнего уровня элемента ссылки (0 3px), чтобы значок был выровнен точно по высоте текста.
….

Разные варианты стилизации полноразмерных фотографий и эскизов

На нашей странице мы можем реализовать еще одну отличную идею, применив селекторы атрибутов: оформить фотографии и эскиз карты с использованием разных стилей. Для того чтобы сделать это без помощи CSS3, нужно поместить эскиз в отдельный класс и связать с ним уникальные стили. Конкретно на этой странице это сделать довольно просто. Однако в реальном мире работа с классами обычно влечет немало проблем.
Проблемы с классами
Существует множество допустимых сценариев использования классов, однако с ними связаны определенные проблемы, усложняющие их применение в некоторых ситуациях.
Классы раздувают код HTML. Мы в нашем примере добавляем только один класс, и вряд ли это может серьезно повлиять на размер файла, однако на больших страницах и сайтах с более сложными стилями может возникать необходимость во множестве дополнительных классов — и тогда объем кода соответствующим образом увеличивается. Если существует возможность избежать добавления в код HTML-классов и идентификаторов и использовать другой надежный метод
выбора нужных элементов, всегда прибегайте к этому методу.
Разметка может управляться системой CMS или встраиваемым модулем, что делает абсолютно невозможным добавление классов в код HTML.
Ответственным за добавление содержимого может быть ваш клиент, а в таком случае нельзя гарантировать, что он запомнит и выберет нужные классы.
У вас может не быть прав на изменение кода HTML, если вы отвечаете в проекте только за разработку CSS. Аналогичная ситуация возможна, если вас пригласили в существующий проект для небольшого обновления стилей.
Если возникнет необходимость в новых стилях, потребуется много времени, чтобы добавить классы к существующему сайту с миллионом страниц. Намного проще написать код CSS, который успешно обработает уже существующие возможности HTML, и вам не придется возвращаться и перелопачивать весь HTML для создания дополнительных якорей стилей.