<rmcreative>

RSS

Все заметки с тегом «CSS»

Можно уточнить:

  1. Steve Souders об особенностях клиентской оптимизации

    15 февраля 2010

    Steve Souders поделился сразу несколькими занятными фактами об особенностях современных и не очень браузеров.

    IE и независимые от протокола URI

    Internet Explorer 7 и 8 при использовании URI вида "//rmcreative.ru/css/main.css" будут загружать файл два раза. При явном указании http, https или использовании относительных URI этого не происходит.

    document.write и FireFox

    При загрузке скриптов через document.write в FF (в том числе и в 3.6) блокируются остальные загрузки.

    IE грузит стили с media="print"

    Причём делает это даже когда мы ничего не печатаем. При этом до полной загрузке блокируется рендеринг страницы.

    Подключаем стили через JavaScript

    Можно избежать блокировки, используя JavaScript:

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '/main.css';
    document.getElementsByTagName('head')[0].appendChild(link);

    Chrome, Safari и загрузка фоновых изображений

    Перечисленные браузеры начинают загружать фоновые изображения до подгрузки CSS. Таким образом, изображения будут загружены даже если в CSS они переопределены.

    Источники:

    4 комментария
  2. Zen Coding для Akelpad и cheat sheet-ы

    25 января 2010

    К проекту Zen Coding, позволяющему быстро набирать HTML и CSS, добавилась частичная поддержка Akelpad и шпаргалки.

    Всё это можно забрать из файлов проекта

    Комментировать
  3. Равномерный фон под текстом

    20 января 2010

    http://chikuyonok.ru/u/2010/01/example.png

    Несколько интересных способов сделать padding фона у многострочной неквадратной надписи.

    Изучаем и предлагаем свои решения

    Комментировать
  4. Кроссбраузерный border-radius

    7 января 2010

    Одной из самых больных тем верстальщиков являются скругление уголков. В последнее время ситуация улучшается и браузеры потихоньку начинают поддерживать столь востребованные CSS-свойства. FF, Safari, Chrome делают это через свойства с своими особыми префиксами, Opera — скоро будет делать без префиксов. В стороне у нас стоит, как всегда, IE.

    К счастью, IE можно довольно красиво победить его же средствами. Одно из понравившихся мне решений, использующее VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем рядом с CSS и используем следующий код:

    .my-block {
      /* Для хороших браузеров */
      -moz-border-radius: 10px; /* Firefox */
      -webkit-border-radius: 10px; /* Safari, Chrome */
      -khtml-border-radius: 10px; /* KHTML */
      border-radius: 10px; /* CSS3 */
      /* Для плохих IE */
      behavior: url(border-radius.htc); /* учим IE border-radius */
    }

    Да, кстати, по соседству можно найти менее востребованный, но всё же полезный behaviour для box-shadow.

    Демо

    69 комментариев
  5. Вёрстка растягивающихся сайтов

    6 января 2010

    Сергей Чикуёнок в очередной раз радует качественной подробной статьёй. В этот раз был описан способ построения сложных растягивающихся макетов, похожий на тот, что я использовал в «фиксированная середина, плавающие колонки». Самое вкусное — решена проблема с округлением и вызываемым им подёргиванием в один пиксель при изменении размера окна.

    Читаем

    Комментировать
  6. Рендеринг: отрисовка, перерасчет дерева / макета, стилизация

    31 декабря 2009

    Перевод довольно подробной статьи о процессе отрисовки HTML и CSS.

    Читаем

    Комментировать
  7. CSS hack для Firefox 3.5

    25 декабря 2009

    И ещё один страшный и ужасный хак. На этот раз для FF3.5.

    Рассматриваем

    1 комментарий
  8. CSS hack для Opera 10.50, 10.xx, не 10.50

    25 декабря 2009

    Евгений Степанищев по случаю выхода пре-альфы Opera 10.50 придумал несколько полезных хаков, позволяющих отличить разные версии браузера.

    Читаем

    2 комментария
  9. Работа с цветовой моделью RGBA

    16 декабря 2009

    Неплохой перевод статьи про RGBA и его использование в Firefox, Safari, Opera и Chrome.

    Читаем

    Кстати, для IE можно обойтись относительно малой кровью:

    div {
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#99FFFFFF);
      zoom: 1;
    }

    Формат параметров: AARRGGBB, где AA — альфа-канал, RR — красный, GG — зелёный, BB — синий.

    3 комментария
  10. Фиксированная середина, плавающие колонки

    5 декабря 2009

    Вчера понадобилось получить довольно нестандартную трёхколоночную разметку: с фиксированной средней колонкой (например, шириной в 500px) и двумя боковыми, занимающими всё остальное пространство.

    http://rmcreative.ru/playground/fluid-fixed-fluid/target.png

    Оказалось, что решение довольно интересное.

    Читаем

    17 комментариев