alexilin

В процессе веб-разработки, в частности создания таблицы стилей, часто возникает необходимость блокировки отдельных правил. Для этого используються комментарии /* ... */. Недавно на одном сайте я обнаружил альтернативный и более быстрый способ. Просто добавьте «x» перед правилом. Вот так:

#header {
	border-top: 1px solid #ccc;
	xborder-bottom: 1px solid #000;
	}

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

Что думаете?

На блоге «The Webmakers Lounge» появилась очень полезная статья об использовании псевдокласса :first-letter для назначения 2-х фоновых изображений одному элементу. Примечательно что способ работает в IE6, но как всегда не без определенного нюанса. Выглядит это следующим образом:

Допустим у нас есть заголовок

<h2>НОВОСТИ</h2>

Добавляем стили…

h2{
background:#002261 url(/images/star2.jpg) right center no-repeat
}
h2:first-letter {
background: url(/images/star1.jpg) left center no-repeat;
padding-left:25px
}

Двойной фон готов!

А нюанс заключается в том что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой, в противном случае в IE6 метод не сработает.

Нашел полезную таблицу, где описана поддержка CSS свойств в различных почтовых клиентах и сервисах.

Оригинал: A Guide to CSS Support in Email: 2007 Edition

Браузеры могут отличать посещенные и непосещенные ссылки. Почему бы не воспользоваться этим свойством. Даже если вы не собираетесь применять стили к ссылкам, у большинства браузеров они есть по умолчанию.

С помощью псевдо-классов CSS можно оригинально отметить посещенные ссылки, добавив визуальный индикатор. Пример можно увидеть здесь.

Так как задача состоит в добавлении индикатора к ссылкам, идеальным решением является использование псевдо-классов :before или :after.

a:visited:before {
content:  "";
}

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

a:visited:before {
content:  "\2713 ";
}

Работает в Firefox, Opera, Safari и конечно же не работает в IE. IE не поддерживает эти псевдо-классы… Можно решить задачу без использования :before и :after, используя только a:visited (который понимает IE) и применив некоторые стили. Однако теперь индикатор будет являться изображение:

a:visited {
padding-left: 14px;
background: url(images/checkmark.gif) left no-repeat;
}

Готово!

Оригинал: «Checkmark» Your Visited Links with Pure CSS

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

a {
padding:0 7px;
}
a:visited {
padding-left: 14px;
background: url(images/checkmark.gif) left no-repeat;
}