Хабрахабр: коллективные

Каскадные Таблицы Стилей / Unlimited IE one-time CSS expressions

ArtyV — Thu, 18 Mar 2010 11:17:58 GMT

В поддержку дней CSS expressions на хабре

Думаю все, кто сталкивался с решением каких-нибудь проблем в IE<8 знает про CSS expressions и про «одноразовые» CSS expressions, которые применяются к элементу только один раз, тем самым не создавая постоянной нагрузки на процессор. Обычно это решается так:

.my-class {
    behavior: expression(someMagick(), runtimeStyle.behavior = 'none');
}

А что, если хочется использовать больше свойств?

Каскадные Таблицы Стилей / CSS-Expressions on DOMReady (CSS+JS в одном файле)

madimp — Wed, 17 Mar 2010 20:01:26 GMT

Вероятно, многие из вас используя css-expressions сталкивались с проблемой периодического появления сообщения abort. В народе поговаривают, что связано это с изменением DOM-дерева до его готовности.

Я тоже сталкивался и, не долго думая, решил написать небольшую «обертку» для expression’ов, которые я часто использую, учитывающую готовность DOM, упакованную в файл стилей.
Оную вашему вниманию и представляю.

Каскадные Таблицы Стилей / Шрифт с помощью CSS

porcelanosa — Wed, 17 Mar 2010 15:12:51 GMT

Дэвид Дисандро разработал CSS, который рисует шрифт. Шрифт он назвал Curtis.

Читать дальше →

Каскадные Таблицы Стилей / CSSDoc — формат комментариев для CSS

ArtyV — Sat, 13 Mar 2010 13:11:32 GMT

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

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

Если интересно, то нужно нажать на эту ссылку.

Каскадные Таблицы Стилей / Правила хорошего CSS

reffy — Sat, 13 Mar 2010 08:02:28 GMT

Расскажу о своих правилах, которые я использую в любом файле CSS.

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

Читать дальше →

Каскадные Таблицы Стилей / Как IE8 определяет Document Mode, по которому затем рендерит сайты

mester — Thu, 04 Mar 2010 07:33:19 GMT

Команда IE официально опубликовала алгоритм определения Document Mode в IE8.

Оказывается при определении Document Mode учитывается множество косвенных параметров, связанных с интранетом и клиентскими настройками.

Читать дальше →

Каскадные Таблицы Стилей / [Перевод] Тонкости использования селекторов аттрибутов в CSS

kostos — Tue, 02 Mar 2010 06:58:50 GMT

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

<h2 id="first-title" class="magical" rel="friend">David Walshh2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

h2[rel=friend] { /* woohoo! */ }

Читать дальше →

Каскадные Таблицы Стилей / [Перевод] Анимированный AT-AT Walker из Звездных войн на чистом CSS3

Kron0S — Mon, 08 Feb 2010 06:02:57 GMT

Нашел на днях интересный пример использования CSS3 и решил поделиться им с сообществом. Примеры сделаны для движка webkit, но все должно работать и в других браузерах, поддерживающих css3.

В этой статье мы рассмотрим, как можно сделать AT-AT Walker из V эпизода Звездных войн с помощью CSS3 анимации. Начнем с обзора тех свойств CSS3, которые делают эту анимацию возможной. Затем рассмотрим список частей AT-AT и CSS код для движения каждой части.

подробнее...

Каскадные Таблицы Стилей / Golden Grid CSS: PSD-шаблон

Altzgamer — Mon, 01 Feb 2010 12:00:46 GMT

Относительно недавно познакомился с CSS-сеткой Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.

Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.

Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.

Скачать (.zip, 20 кб)

Каскадные Таблицы Стилей / [Ссылка] 3D банка Колы на чистом CSS

yoihj — Tue, 26 Jan 2010 12:13:29 GMT

По ссылке двигать скроллер вправо-влево. Чистый CSS эффект.
Исходник для изучения тут: http://www.romancortes.com/ficheros/css-coke.html

Каскадные Таблицы Стилей / Колоночная верстка

dioteos — Tue, 19 Jan 2010 07:31:30 GMT

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

Плюсы

Есть прижимающийся к полу футер
Колонки меню растягиваются по 100% высоте
Колонок может быть сколько душе угодно
Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
Ширина как резиновая, так и фиксированная
Критический минимум хаков
Не используется Javascript
Не используются бекграундовые изображения для создания эффекта колонки
Никаких таблиц
Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
Есть несколько абсолютно-позиционируемых блоков

Читать дальше →

Каскадные Таблицы Стилей / Opera 10.50 и CSS-хаки

bolk — Thu, 24 Dec 2009 23:19:06 GMT

Opera 10.50 стала поддерживать border-radius и много других интересных вещей, в этой связи встал вопрос — как отличить Opera 10.50 от более ранних версий в CSS?

Например, у меня на сайте скруглённые уголки для «Оперы», начиная с версии 9.50 делаются при помощи SVG, 10.50 вполне могла бы нарисовать их без этого «изыска». Помучался-помучался и придумал несколько CSS-хаков, собственного изобретения.

Читать дальше →

Каскадные Таблицы Стилей / Инструменты css, экономящие ваше время

doctorgrif — Wed, 23 Dec 2009 18:34:30 GMT

Вольно-сокращенный перевод статьи 15 Time Saving CSS Tools You Should Be Aware Of
Под катом текст, графика, ссылки

Читать дальше →

Каскадные Таблицы Стилей / Поддержка CSS3 в Opera 10.50

shaggysmile — Wed, 23 Dec 2009 05:18:45 GMT

С поддержкой CSS3, браузером Оперой, всегда было не особо густо.

Но сегодня, в пре-альфе версии 10.5, Опера анонсирует поддержку интересных и давно ожидаемых фич CSS3, в частности это — CSS3 Transitions и 2D Transform. Правда пока, это еще далеко не рабочее решение, и поэтому, для того что бы посмотреть как это работает в Опере, используем префикс -o. Подробности по ссылке

Все это стало возможно, не без помощи движка Opera’s Presto 2.5

И наконец-то, долгожданная поддержка CSS3 Backgrounds и Borders. И кстати, Опера первый браузер, который позволяет использовать эти прелести без префиксов -moz или -webkit

Читая новость, дойдя до слова префикс -o, я подумал, блин, еще один префикс, но за это (см. абзац выше) — я готов простить Опере новый префикс и сказать, а ведь не зря, используя CSS3 в своих проектах, я писал еще и просто border-radius (помимо -moz и -webkit)

P.S. Опубликовал этот топик именно в этот блог, так как фанаты Оперы еще явно что-то напишут в блог Оперы.

Каскадные Таблицы Стилей / [Ссылка] Вослед за ноябрьскими собраниями TPAC (W3C Technical Plenary / Advisory Committee) наблюдается рост статуса модулей будущего стандарта CSS3

Mithgol — Wed, 16 Dec 2009 17:02:01 GMT

Модуль «CSS3 Selectors» (которому в апреле исполнится десять лет) достиг статуса «Proposed Recommendation».

Модуль «CSS3 Multicolumn Layout» достиг статуса «Candidate Recommendation».

Рабочие черновики модулей «CSS3 Transitions» и «CSS3 2D Transforms» обновлены, статус «Last Call» недалёк уж от них.

Модуль «CSS3 Color» достиг статуса «Candidate Recommendation».

Блог CSS3.info поведывает обо всех этих событиях и приводит гиперссылки, ведущие ко стенограммам заседаний TPAC.

Каскадные Таблицы Стилей / Еще одна причина не использовать @import

waitekk — Fri, 11 Dec 2009 22:36:02 GMT

Надеюсь, многие прочитали топик «Не используйте @import», если еще не — советую прямо сейчас. К слову, в комментариях можно отыскать еще пару заметок: при использовании import браузер не лезет на сервер с заголовком If-modified-since и не ждет 304. Он полезет если упорно нажать F5 или ctrl+f5., и IE 6 (и вроде IE 7) может загружать только 32 элемента идущих в шапке. Хотя про последний вроде тоже многие знают.

А сегодня я нашел еще одну неприятную особенность использования @import.

При попытке сохранения документа «Полностью», браузеры не подхватывают импортированные стили, и страница отображается без них. IE так вообще ругается, и ничего сохраняет, только если выбрать режим «Веб-архив», да и тогда сайт отображается не всегда корректно. Проверял в IE7/8, FF3, Chrome 3, Opera 10.

Каскадные Таблицы Стилей / WebKit и expression

Olegbl4 — Sat, 07 Nov 2009 12:47:48 GMT

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

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

читается WebKit (Chrome, Safari) браузерами и стили после ней браузер не воспринимает и, соответственно, не применяет. Опытным путём было установлено, что проблема в этой конструкции в символах "{" и "}", которые в сумме вызывают какие-то метаморфозы в браузерах. Причём если убрать "{", то баг исчезает, а если "}", то остаётся. Естественно, наличие ";" в конце правила, тип селектора (т.е даже если это будет селектор для ИЕ, вроде * html [selector]), тип правила (например предварение правила "//" или "_") ситуации НЕ исправляют, иначе было бы не так уж и страшно!

Особенно знание этого бага полезно людям, любящим объединять все стили в один файл, не вынося стили для IE в отдельный файл, вместо этого используя star-hack и иже с ним! В любом случае если вы относитесь к тем, кто не выносит стили для Internet Explorer'a в отдельный файл, то пишите хотя бы expression'ы в конце файла, иначе долго будете искать причину проблем!

Каскадные Таблицы Стилей / [Ссылка] Анимация только средствами CSS3 и 2d-преобразования с помощью CSS3

mester — Thu, 05 Nov 2009 08:30:16 GMT

Описание и примеры будущих возможностей CSS, которые уже можно использовать сейчас для самых продвинутых версий браузеров.

2d-преобразования поддерживаются Firefox 3.5, Safari 4, Chrome 3.
Анимация средствами CSS3 поддерживается только webkit-ом (Safari 4, Chrome 3).

Каскадные Таблицы Стилей / Фиксим png в IE6 с помощью expression, одним классом и без использования однопиксельного gif'а

Olegbl4 — Mon, 02 Nov 2009 16:14:08 GMT

Это давно известная проблема. У этой проблемы существуют 1000 решений, правда все они используют в конечном счёте один и тот же, проверенный AlphaImageLoader. Я, скорее всего, не открою Америку, а лишь хочу рассказать вам об expression'е, которым с недавних пор пользуюсь и которого достаточно в 99% случаев, а также объясню как, почему и зачем я его написал.

Читать дальше →

Каскадные Таблицы Стилей / [Перевод] 11 примеров использования CSS3

Roma2Duo — Sun, 01 Nov 2009 07:42:38 GMT

Здесь показаны 11 примеров того, как можно использовать CSS3. Они представлены в виде сравнения. В первом случае используется CSS2 (или Javascript), а во втором — CSS3.

1. Закругление углов

Классический путь

Читать дальше →