Родительские страницы:
  1. Главная
  2. Блог
  3. Метки
  4. «css»

Заметки с меткой «css»

  • Позиционирование фона с отступом от правого нижнего края элемента (+)

    Ранее для позиционирования фона с отступом от правого или нижнего края HTML-элемента приходилось встраивать пустое пространство непосредственно в изображение, поскольку в CSS такой возможности не было.

    Ситуация меняется благодаря модулю CSS3 «Backgrounds and Borders», где предусмотрен обновлённый синтаксис background-position, позволяющий задать произвольные отступы от правого и/или нижнего краёв элемента.

  • display-table.htc — новые возможности

    В авторскую JavaScript-библиотеку display-table.htc, предназначенную для эмуляции CSS-свойств семейства display: table в IE6/7, добавлены новые удобные возможности.

    1. display-table.htc теперь можно привязать не только напрямую к элементу, подлежащему преобразованию в таблицу, но и к элементу BODY, в результате чего эмуляция display: table будет автоматически применена ко всем элементам, для которых задано CSS-псевдосвойство -dt-display: table.
    2. Теперь можно помещать элементы-ячейки напрямую в элемент-таблицу, сохраняя при этом идеальную чистоту HTML-кода: более нет необходимости ни в дополнительном элементе-прослойке, ни в служебном CSS-классе. Строка таблицы теперь генерируется автоматически, если первому дочернему элементу исходного элемента-таблицы задано CSS-псевдосвойство -dt-display: table-cell.
    3. Реализована эмуляция CSS-свойства border-spacing с помощью псевдосвойства -dt-border-spacing, задаваемого для исходного элемента-таблицы.

  • Генератор border-radius

    Генератор border-radius — авторский онлайн-инструмент для автоматизированной генерации CSS-кода, реализующего скруглённые уголки у HTML-блоков с помощью CSS3-свойств семейства border-radius.

    Особенности:

    • генерация минимально достаточного CSS-кода с учётом наличия совпадающих радиусов;
    • возможность раздельно задать единый для всех углов радиус и радиусы для каждого из углов;
    • выбор конкретного набора необходимых vendor-префиксов;
    • отключаемое выравнивание свойств по двоеточию;
    • встроенная возможность обхода проблем отрисовки закруглений.

  • Исправляем отрисовку border-radius (+)

    В браузерах, отличных от Firefox, существуют проблемы в отрисовке блоков с border-radius. Но в большинстве случаев их можно обойти.

  • Firefox 6 (+)

    Firefox 6 — второй выпуск современного браузера Firefox после перехода Mozilla к схеме коротких циклов разработки (шесть недель). Эта схема призвана максимально оперативно доносить новые возможности до пользователей и веб-разработчиков, потенциально способствуя сокращению цикла внедрения веб-технологий, более быстрому развитию Сети и более успешной конкуренции с другими браузерами.

    Наиболее интересные новшества Firefox 6 включают автоматическую расстановку переносов, управление стилем подчёркивания текста, поддержку WebSockets, подсветку домена в адресной строке и др.

  • Псевдокласс :first-child и комбинатор + в IE7 (+)

    Несмотря на то, что формально IE7 поддерживает CSS-селектор :first-child и комбинатор +, есть ограничение: если в HTML-коде «на месте» элемента, на который указывает CSS-селектор, окажется комментарий, IE7 не применит стили к элементу, следующему за комментарием.

    Однако проблему можно обойти путём динамического удаления HTML-комментариев как DOM-узлов средствами JavaScript по факту загрузки HTML-страницы.

  • Эмуляция display: table для IE6/7

    display-table.htc — авторская JavaScript-библиотека для эмуляции CSS-свойств семейства display: table в IE6 и IE7, лишённых встроенной их поддержки.

  • Firefox 5 (+)

    Firefox 5 — новая версия одного из наиболее продвинутых браузеров современности.

    Отныне новый Firefox будет выходить раз в шесть недель и содержать по сути лишь одно-два заметных нововведения. В Firefox 5 таким нововведением стала поддержка CSS-анимаций.

    Есть и некоторые другие приятные новшества.

  • Локальные CSS-классы (+)

    При использовании CSS-классов могут возникать конфликты имён. Наиболее характерно это для классов, имеющих смысл строго в определённом контексте.

    Совпадение имён локальных классов с именами глобальных приводит к потенциально нежелательному наследованию стилей глобальных классов одноимёнными локальными. Однако есть простой способ этого избежать.

  • Вертикальная перестановка блоков средствами CSS

    Авторская статья «Вертикальная перестановка блоков средствами CSS» рассказывает о методе, позволяющем полноценно изменять визуальный порядок блоков по вертикали так, как если бы в HTML-коде они располагались именно в таком порядке.

    Англоязычная версия статьи:
    Vertical reordering of blocks with CSS.