Фишки CSS

Упорядоченные списки, счётчики и экспрешн для IE

Заметки - Фишки CSS

Представьте ситуацию: в макете страницы, которую вам надо сверстать, есть упорядоченный список. Всё бы ничего, да в дизайне стиль текста в списке отличается от стиля цифр, выступающих в роли маркера каждого пункта.

И ладно, если отличие небольшое — в размере шрифта, цвете или другом свойстве шрифта. В таком случае самый простой способ реализовать подобное — задать стиль для элемента списка (это будет стиль для маркера), после чего обрамить всё содержимое пункта в блок, в котором переопределить соответствующие стили.

Но что, если отличия не только в шрифте? В таком случае, чаще всего, верстальщики забивают на семантику и добавляют в каждый пункт списка элемент с соответствующей цифрой, и уже ему задают необходимые стили

Эмуляция &gt

Заметки - Фишки CSS

Как известно некоторый браузер не поддерживает правила «>» в CSS, которое иногда бывает очень нужным, например при создании списка списков, когда первый уровень списка не имеет отступа, а второй и последующие имеют. Сегодня мне в голову пришло решение, которое я хочу представить на ваш суд:

Первое правило в данном случае будет аналогом .wrapper > ul > li, что и требовалось.

Надо понимать, что это не полноценная эмуляция «>», т.к если из CSS правил убрать

@font-face или назад в будущее

Заметки - Фишки CSS

Вторая половина 2009 года ознаменовалась возвращением позабытой на долгое время техники внедрения шрифтов в страницы сайтов, с помощью свойства CSS @font-face, которое было предложено в спецификации CSS2 разработчикам браузеров еще в мае 1998 года!

WebKit и expression

Заметки - Фишки CSS

Да, это не опечатка! Внезапно обнаружил, что конструкция:

.myclass {behavior:expression((function(){})(this))}

читается WebKit (Chrome, Safari) браузерами и стили после ней браузер не воспринимает и, соответственно, не применяет. Опытным путём было установлено, что проблема в этой конструкции в символах { и } , которые в сумме вызывают какие-то метаморфозы в браузерах. Причём если убрать { , то баг исчезает, а если } , то остаётся. Естественно, наличие ; в конце правила, тип селектора (т

CSSDoc — формат комментариев для CSS

Заметки - Фишки CSS

Уже неоднократно видел утверждение, что CSS необходимо комментировать, чтобы потом было проще сориентироваться себе или тому, кто также поддерживает или будет в дальнейшем поддерживать ваш код. Но почему-то никто не предлагает использовать какой-то универсальный формат комментариев, который был бы понятен всем, хотя в программировании такое используется повсеместно: JavaDoc, JSDoc, PHPDoc и т.п.