Некоторые полезности от Мейера
12.14.2008 – Рубрика: HTML&CSS
Не так давно прочитал одну очень полезную и интересную книгу по верстке, которая называется «CSS — Каскадные таблицы стилей. Подробное руководство» Э. Мейер. Книгу стоит отнести в раздел «must read» для любого человека, который занимается версткой. Единственное о чем пожалел после ее прочтения, что мне раньше не посоветовали прочитать эту «библию верстальщика».
В этой замечательной книге детально рассматриваются практически все фундаментальные аспекты верстки, осведомленность о которых, избавит от необходимости искать подсказки на блогах и форумах и сэкономит кучу времени и нервов.
Для себя я решил записать некоторые полезные тонкости, которые нашел в этой книге и которые помогут привести верстку к более высокому уровню. Список представлен в произвольном порядке.
Подключения стилей
Ни для кого не секрет информация о существовании тега link которые позволяет подключать внешние таблицы стилей. Но вот об атрибуте media многие забывают. Этот атрибут позволяет указать браузеру для чего используется таблица стилей и может получать значения screen, print, aural, handheld, projection, tv. Таким образом, можно задать отдельные стили для оформления информации для экарана монитора или для вывода на печать. К сожалению сейчас можно говорить об адекватной поддержке только двух параметров screen и print.
Капитель в текстах
В типографике кроме прописных и строчных букв есть еще один тип начертания символов – Капитель. Капитель внешне похож на уменьшенный вариант прописных букв, но на самом деле, это совсем другое начертание букв. В ряде книг капитель рекомендуют применять для набора имён, некоторых названий и аббревиатур и шрифтовых выделений в тексте. Заголовок этого параграфа набран капителием. Для задания капители в верстке есть отдельное свойство каскадных таблиц – font-variant:small-caps;
Некоторые псевдоклассы
Кроме всем известного псевдо класса :hover(IE6 без дополнительных мер поддерживает этот псевдо класс только для ссылок), который задает стиль для объекта над которым находится курсор, и :link,: active, :visited, есть еще ряд других полезных псевдо классов. К ним относится псевдокласс :focus (выделяет активный элемент, например поле в которым находиться курсор, IE7 и ниже не поддерживают ), :first-child (стилевое оформления для первого дочернего элемента), :first-letter (стилевое оформления для первой буквы элемента), first-line(стилевое оформления для первой строки элемента), :after(псевдокласс, который используется для вывода желаемого контента после элемента IE7 и ниже не поддерживают), :before(псевдокласс, который используется для вывода желаемого контента до элемента IE7 и ниже не поддерживают).
Оформления пробелов и запрет переноса
В html 3 для того чтоб запретить переносить строку если она не помещается в контейнер использовался тег nobr, в html 3.2 и выше этот тег считается устаревшим, но его функцию заменяет параметр CSS white-space, который может принимать такие значения: nowrap (переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега br переносит текст на новую строку), pre (текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки), pre-wrap (сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку, не работает в IE6, для поддержки нужно дописать параметр word-wrap: break-word; который можно вынести в отдельный файл стилей для IE чтоб сохранить валидность).
Выравнивание текстов возле элементов формы
Если в одной строке помещать поле ввода, или другой элемент формы вместе с текстом, который указывает назначение этого поля, элементы формы будут выровнены относительно базовой линии строки, причем в разных браузерах будут визуальные отличия в расположении. Для того чтоб изменить расположения элементов формы, скажем выровнять по вертикали, нужно воспользоваться параметром vertical-align задав ему одно из допустимых значений: top, middle, bottom, baseline, также допускается значение заданное в процентах.
6 Отзывов to “Некоторые полезности от Мейера”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 11 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 24 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 1 отзыв)
Декабрь 14, 2008 в 20:42
Привет. Давно тебя не было. Вот еще интересные книги (уже по типографике) – http://eldesign.ru/book/typo/. Там только обзоры, но найти уже будет несложно, если захочется.
Декабрь 14, 2008 в 21:59
Я когда тока начинал верстать – ненавидел формы, и как следствие не любил делать всякие порталы и интернет магазины. Но так сложилась жизнь… (работаю в медийном холдинге) что теперь я очень люблю формы. О так о чем это я. Формы-формы-формы, я за время работы выработал для себя определённые правила. Но я понял одно, что с помощью vertical-align нельзя добиться одинакового выравнивания во всех браузерах. потому что один считает за базовую линию линию текста внутри формы а другой браузер считает нижнюю границу.
каюсь, да, забываю. и вспоминаю когда надо делать версию для печати.
Декабрь 15, 2008 в 22:16
да собственно основы верстки… не знаю, может книга и нормальная, но перечислены сплошные основы, о которых, кстати, забываешь, когда не нужно))) а потом когда читаешь такие книги, то так удивлённо вспоминаешь об этом)
Декабрь 17, 2008 в 13:22
А вот для псевдоклассов :before и :after можно просто прописать хак для IE и все прекрасно работает… я вот их очень люблю)
Декабрь 17, 2008 в 21:37
Klaid подскажи хак.
Книга бействительно из разряда «mast read».
Март 13, 2010 в 17:13
Пишите побольше!