CSSO — зародившийся в недрах Яндекса оптимизатор CSS с комплексным подходом к проблеме. Проект молодой, но, в перспективе, выгодно выделяется среди остальных.
- Анонс
- Код на GitHub (для запуска требуется node.js)
- Онлайн-версия
Все заметки с тегом «CSS»
-
CSSO (CSS Optimizer)
29 апреля 2011
Комментировать -
CSS reset Мейера 2
27 января 2011
3 комментарияВ новой версии CSS-ластика, предназначенного для выравнивания начальных условий при вёрстке под разные браузеры, произошли некоторые изменения:
- Больше не сбрасывается тег
font, свойствоoutlineи фон не выставляется в прозрачный. - Всем сбрасываемым элементам выставляется
font: inherit. - Добавлены в сброс
article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video. - Убраны правила для
insиdel. - Добавлено правило для элементов HTML5:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
- Больше не сбрасывается тег
-
Сложное обтекание текстом
26 января 2011
23 комментарияИногда, особенно при оформлении промо-страничек, так и хочется сдалать «журнальную» обложку с текстом заметки, который обтекает иллюстрацию. Многие верстальщики, видя такое, сразу говорят, что это невозможно. Однако, немного подумав, сверстать «как в журнале» можно.
Если картинка прямоугольная, то решается наша задача довольно просто. Свойство float с соответствующим значением left или right вполне решает нашу проблему. Но что же нам делать с яблоком?!
На самом деле наше яблоко почти ничем не отличается от прямоугольного… разве что прямоугольник получается не один.
Текст будет идти в две колонки, поэтому мы делим яблоко на две части. Далее сверху вниз у нас выходят отступы с разной шириной. На каждый из таких отступов заводим отдельный элемент div. Сразу после блоков- отступов размещаем текст.
Для лучшего понимания можно навести мышь на яблоко и посмотреть код.
-
Каскад background-а для table в IE7
16 декабря 2010
3 комментарияСегодня IE7 преподнёс неприятный сюрприз. Необходимо было положить фоновую картинку под
table. Положил. Проверил в IE8 и остальных. Порадовался. Открыл IE7 и был немного удивлён тем, что картинка повторяется. Сначала подумал на несрабатываниеno-repeat, но оказалось, чтоbackground, заданный дляtable, в IE7 каскадируется на каждуюtd. Итого, чтобы положить фон под всю таблицу пришлось:/* задать фон */ #mytable { background: url(/images/table-bg.png) no-repeat 0 0; } /* вернуть прозрачный фон ячейкам */ #mytable td { background: transparent; }
И, всё-таки, как приятен IE после Outlook…
-
Premailer
14 декабря 2010
5 комментариевPremailer — похоже, единственный бесплатный инструмент, хоть как-то облегчающий участь тех, кому приходится верстать HTML-письма. На вход подаём наш HTML с CSS в
head → style. Отдаётся:- HTML, по возможности, без тега
styleсо всеми стилями, применённымиinline. - Относительные ссылки заменены на абслютные.
- То, что нельзя вынести в
inline, например,:hoverостаётся вhead. - Куча предупреждений по совместимости с почтовыми клиентами.
- Текстовая версия письма.
- HTML, по возможности, без тега
-
CSS3 PIE стал частью Sencha Labs
11 ноября 2010
1 комментарийCSS3 PIE, добавляющий в IE
border-radiusи другие приятные плюшки нового CSS, стал частью фонда Sencha Labs. То есть фактически будет спонсироваться Sencha (бывшей Ext JS). Ранее в Sencha Labs вошли такие проекты, как Raphaël, JavaScript InfoVis Toolkit и jQTouch.CSS3 PIE останется бесплатным и открытым, но, думаю, развиваться будет теперь быстрее.
-
Как прописать путь
20 октября 2010
12 комментариевДанный вопрос, в вариациях «как прописать путь к картинке в CSS», «как прописать путь к CSS в HTML» и других, часто возникает у начинающих веб-разработчиков. Даже довольно опытные разработчики частенько путаются с абсолютными путями в CSS.
-
Странная рамка вокруг input[type=submit] в Opera
12 августа 2010
15 комментариевOpera, в отличие от IE, не так часто «радует» странностями, но иногда, как и у остальных браузеров, случается.
Тестовый наборчик (воспроизводится на последнем релизе, Windows)
При фокусе на input[type=text] вокруг submit появляется чёрная однопиксельная рамка. Так как для кнопки использован border-radius, а рамка у нас прямоугольная, логично предположить, что это не border. Также проверил, что это не outline.
Вадим Макеев подтвердил, что это такая фича, означающая, что форма в данный момент находится в фокусе, а кнопка с чёрной рамочкой её сабмитит. Работает это таким образом только на Windows. Ну и так как такое поведение желательно не всегда, в будущих версиях рамочка либо будет убрана совсем, либо будет документирована и её будет возможно убрать.
Пока же единственный способ решить данную проблему — обернуть кнопку дополнительным элементом, задать самой кнопке border: none, а обёртке соответствующий border и border-radius.
-
CSS3PIE
14 июля 2010
2 комментарияПоявилась альтернтива ie-css3.htc, добавляющего IE поддержку теней от блока и текста и уголков CSS3.
На данный момент в CSS3PIE поддерживаются:
border-radius.
box-shadow.
border-image.
несколько background.
линейный градиент как фон.
Планируется поддержка других возможностей.
-
Все префиксированные CSS-свойства на одной странице
10 июля 2010
КомментироватьPeter Beverloo собрал полезную табличку, показывающую префиксированные CSS-свойства для Gecko (FF), WebKit (Safari, Chrome), Presto (Opera) и Trident (IE).
