Gastarbayteroff.NET

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плюсы

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

Минусы

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

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

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

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

С поддержкой 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. Опубликовал этот топик именно в этот блог, так как фанаты Оперы еще явно что-то напишут в блог Оперы.