Модуль «CSS3 Selectors» (которому в апреле исполнится десять лет) достиг статуса «Proposed Recommendation».
Модуль «CSS3 Multicolumn Layout» достиг статуса «Candidate Recommendation».
Рабочие черновики модулей «CSS3 Transitions» и «CSS3 2D Transforms» обновлены, статус «Last Call» недалёк уж от них.
Модуль «CSS3 Color» достиг статуса «Candidate Recommendation».
Блог CSS3.info поведывает обо всех этих событиях и приводит гиперссылки, ведущие ко стенограммам заседаний TPAC.
Надеюсь, многие прочитали топик «Не используйте @import», если еще не — советую прямо сейчас. К слову, в комментариях можно отыскать еще пару заметок: при использовании import браузер не лезет на сервер с заголовком If-modified-since и не ждет 304. Он полезет если упорно нажать F5 или ctrl+f5., и IE 6 (и вроде IE 7) может загружать только 32 <link> элемента идущих в шапке. Хотя про последний вроде тоже многие знают.
А сегодня я нашел еще одну неприятную особенность использования @import.
При попытке сохранения документа «Полностью», браузеры не подхватывают импортированные стили, и страница отображается без них. IE так вообще ругается, и ничего сохраняет, только если выбрать режим «Веб-архив», да и тогда сайт отображается не всегда корректно. Проверял в IE7/8, FF3, Chrome 3, Opera 10.
Да, это не опечатка! Внезапно обнаружил, что конструкция:
.myclass {behavior:expression((function(){})(this))}
читается WebKit (Chrome, Safari) браузерами и стили после ней браузер не воспринимает и, соответственно, не применяет. Опытным путём было установлено, что проблема в этой конструкции в символах "{" и "}", которые в сумме вызывают какие-то метаморфозы в браузерах. Причём если убрать "{", то баг исчезает, а если "}", то остаётся. Естественно, наличие ";" в конце правила, тип селектора (т.е даже если это будет селектор для ИЕ, вроде * html [selector]), тип правила (например предварение правила "//" или "_") ситуации НЕ исправляют, иначе было бы не так уж и страшно!
Особенно знание этого бага полезно людям, любящим объединять все стили в один файл, не вынося стили для IE в отдельный файл, вместо этого используя star-hack и иже с ним! В любом случае если вы относитесь к тем, кто не выносит стили для Internet Explorer'a в отдельный файл, то пишите хотя бы expression'ы в конце файла, иначе долго будете искать причину проблем!
Описание и примеры будущих возможностей CSS, которые уже можно использовать сейчас для самых продвинутых версий браузеров.
2d-преобразования поддерживаются Firefox 3.5, Safari 4, Chrome 3.
Анимация средствами CSS3 поддерживается только webkit-ом (Safari 4, Chrome 3).
Здесь показаны 11 примеров того, как можно использовать CSS3. Они представлены в виде сравнения. В первом случае используется CSS2 (или Javascript), а во втором — CSS3.
1. Закругление углов
Классический путь
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
$('.box').corners('10px');
});
</script>
<div class="box">
<!--CONTENT-->
</div>
Ðто давно извеÑÑ‚Ð½Ð°Ñ Ð¿Ñ€Ð¾Ð±Ð»ÐµÐ¼Ð°. У Ñтой проблемы ÑущеÑтвуют 1000 решений, правда вÑе они иÑпользуют в конечном Ñчёте один и тот же, проверенный AlphaImageLoader. Я, Ñкорее вÑего, не открою Ðмерику, а лишь хочу раÑÑказать вам об expression'е, которым Ñ Ð½ÐµÐ´Ð°Ð²Ð½Ð¸Ñ… пор пользуюÑÑŒ и которого доÑтаточно в 99% Ñлучаев, а также объÑÑню как, почему и зачем Ñ ÐµÐ³Ð¾ напиÑал.
Вторая половина 2009 года ознаменовалась возвращением позабытой на долгое время техники внедрения шрифтов в страницы сайтов, с помощью свойства CSS @font-face, которое было предложено в спецификации CSS2 разработчикам браузеров еще в мае 1998 года!
Первая реализация данного свойства состоялась и того раньше, в 1997 году, когда компания Microsoft выпустила на рынок браузер IE4, позволявший встраивать на вебстраницы шрифты с помощью нового CSS-свойства @font-face…
Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.
Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа.
О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).
На широко известном в узких кругах сайте smashingmagazine.com товарищ Louis Lazaris выложил интересную статью. В ней он сравнивает возможности поддержки CSS трёх браузеров от компании Microsoft — 6, 7 и 8 версий. Всё разложено по полочкам с примерами и кратким описанием. Мне понравилось, добавил в закладки.