Продвинутый CSS-ластик. Часть вторая.

Эрик Мэйер обновил свое видение обнуления дефолтных значений для HTML-элементов. В принципе изменения незначительны, кроме одного. Эрик изменил свое мнение о наследовании стилей для шрифтов. Из ресета исключены следующие свойства:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-weight: inherit;
font-style: inherit;
}

Теперь заголовки будут выделены жирным шрифтом по умолчанию, em будет наклонным и тд. Так же добавлены стили для del и ins. А вот и полная версия: Continue reading

Псевдокласс :first-letter

:first-letter

Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать.

К делу. Как сказано выше, HTML элемент у нас один. Пусть это будет заголовок первого уровня. Continue reading

Таблица “безопасных” шрифтов для всех версий Windows и их Mac-аналоги

Неплохая таблица “безопасных” шрифтов для веб-разработки. В ней описаны шрифты, присутствующие во всех версиях Windows и их аналоги в Mac.

Таблица безопасных шрифтов для веба

К таблице также приложены скриншоты этих шрифтов в различных браузерах на разных операционных системах и полезные пояснения.

Рекомендовано к ознакомлению.

Апдейты из комментариев:

Increase Your Font Stacks With Font Matrix

Шрифты на русском языке

Блокируем нежелательные HTML-элементы с помощью CSS

Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.

В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать “старую, добрую разметку”, ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и “вечный” font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Continue reading

display:none vs screen readers

Все мы знаем и любим свойство display:none, которое “отключает” вывод блока, для которого оно задано в HTML-документе. Вроде бы свойство безотказное и работает всегда.

Но оказывается, что некоторые screen reader’ы запросто читают контент из блоков, скрытых с помощью display: none. Поэтому, если вам не наплевать на ваших посетителей, у которых плохое зрение или оно вобще отсутствует, то вместо того, чтобы создать класс

.hidden{
display:none;
}

надо создавать

.hidden{
display: none;
visibility: hidden;
}

Свойство visibility: hidden решает проблему и скрывает нужный блок от непослушных “читалок экрана” :) .

min-width и max-width для IE6 одновременно

Используя выражения в CSS-файле для Internet Explorer 6, можно добиться поведения, которое все нормальные браузеры уже давно умеют, а именно min-width и max-width свойства для блока:

#someblock{
width:expression(((document.documentElement.clientWidth ||?
document.body.clientWidth) < 990) ? '990px' : ?
((document.body.clientWidth > 1280) ? '1280px' : '100%'));
} 

Данная заметка является скорее чем-то вроде self-note, но вдруг будет полезна и вам.

P.S. Не забывайте выносить стили для IE в отдельные файлы с помощью Conditional Comments и будет вам счастье :)

Upd.:

После общения с uggallery в коментариях, было решено оптимизировать скрипт так, чтобы не использовать expressions, из-за которых частенько подвисает браузер. Вот что из этого получилось:

Так как скрипт нужен нам только для IE6, выделяем его с помощью Conditional Comments. Скрипт срабатывает на двух событиях – onload и onresize, что не обязательно:

 <!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘wrap’).style.width = ?
((document.documentElement.clientWidth || ?
document.body.clientWidth) < 990) ? ‘190px’ :?
((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]--> 

Все что нужно сделать – это подставить id нужного вам элемента, ну и конечно значения максимальной и минимальной ширины. document.body.clientWidth соответственно тоже меняйте по вкусу.

Скрипт на оригинальность не претендует, да по большому счету от expression и не отличается, просто вынесен из CSS. Знаете как сделать лучше? Нашли ошибку? Коментируйте.

За идею спасибо uggallery, за консультацию copyhold‘у.

Рабочий пример.

Image Replacement vs SEO

Image Replacement – очень популярная в последнее время техника замещения текста графикой, которая обычно применяется к заголовкам, логотипам и рекламным сообщениям, когда нужно оформить текст сложными эффектами и нестандартными шрифтами, а средств HTML и CSS уже не хватает.

По этой теме написано очень много статей, интересующиеся могут почитать об этом здесь (en), здесь (ru), ну и погуглить конечно.

Меня заинтересовал смежный вопрос. Так как техника в любом случае прячет текст от пользователя, заменяя его картинкой/флэшем, то теоретически она может быть рассмотрена поисковиками как один из способов спама. Ну и конечно же может быть использована в корыстных целях недобросовестными оптимизаторами :)

Пробежавшись по просторам Сети я так и не нашел однозначного ответа на вопрос “Надо или не надо?”. Matt Cutts утверждает что делать этого не стоит, а если и делать, то очень аккуратно и слова в спрятанном тексте должны полностью соответствовать словам на картинке. Некоторые над ним посмеиваются.
Некоторые довольно успешные сайты используют Image Replacement, но тоже задаются вопросом, как поисковики реагируют на это.

Есть несколько вариантов:

  • Не использовать Image Replacement
  • Использовать, но очень аккуратно, в точности повторяя слова на картинке и в текст
  • Использовать, но закрыть поисковикам доступ к папке стилей через .htaccess и не париться

Последнее решение приведет к тому, что Google отметит сайт для периодических проверок модератором. Но если вы не спамер – можно не переживать по этому поводу.

А что думаете вы?

Верстаем HTML/CSS календарь

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

Готовых скриптов в Сети много, разной степени навороченности и крутизны, но мне нужно было что-то простое и я не хотел использовать javascript, поэтому решил сделать сам. И вот что у меня получилось:

HTML/CSS календарь

Давайте посмотрим как делается симпатичный календарь с помощью HTML/CSS. Continue reading

Разбор полетов

На днях журнал Smashing Magazine опубликовал статью “70 Expert Ideas For Better CSS Coding“. В статье рассматриваются вопросы организации и структуры кода CSS и возможности его оптимизации.

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

Я буду приводить примеры из оригинальной статьи и комментировать их по своему усмотрению.

Начнем:

* “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.”

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

* Reset your CSS styles first.

Полностью согласен. Об этом я писал в предыдущей заметке “Обнуляем дефолтные значения для HTML-элементов“.

Use a Master Stylesheet.

 master.css
@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");

Не уверен что всегда надо использовать файл-мастер для стилей. Особенно это касается небольших проектов. Часто бывает достаточно одного-двух, правильно структурированых файлов стилей. О структуре ниже. Continue reading

Обнуляем дефолтные значения для HTML-элементов

Известный веб-стандартист и гуру CSS, Eric Meyer, описал вторую версию стилей, обнуляющих дефолтные значения отступов, рамок, размеров шрифтов и т.д. для HTML-элементов, существенно облегчающих начало работы над сайтом.

Вот они, собственно:

 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
}
/* Не забываем описать стили для :focus! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Для таблиц все еще надо прописывать 'cellspacing="0"' в коде */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

С некоторыми из этих правил можно поспорить, да они и не претендуют на универсальность, но в любом случае более полно и четко задают значения для элементов, чем широко используемое * {margin:0; padding:0;}. Continue reading