Поддержка CSS в Firefox 3 и Opera 9.5

И для того, что было добавлено во время итерации CSS 2.1, кроме вышеупомянутого Opera в настоящее время не поддерживает следующее из CSS 2.1:

• visibility: collapseи white-space: pre-lineзначения свойств

Кроме этих Opera предлагает полную поддержку всех рекомендаций для CSS 2 и 2.1, но как насчет CSS 3.0? Opera 9.5 поддерживает следующее из текущей спецификации CSS 3.0:

Медиа-запросы

Это работает подобно условным комментариям, которые многие из нас использовали для таргетинга IE, но стандартным способом, например. Если вы хотите применить определенные стили CSS, если размер экрана меньше указанного значения, вы должны обернуть часть кода CSS, которая будет выполняться тегом @media. Таким образом, для всего, что не соответствует этому сценарию, CSS:

img {
  margin: 10px 0 10px 10px;
  float: right;
}

But if it does the following CSS will be applied:

@media all and (max-width: 360px) {
  img {
    margin: 10px auto;
    float:none;
    display:block;
    font-size:70%;
  }
}

Я сразу вижу полезность этого, особенно при разработке приложения, которое будет доступно для различных устройств. Кто-нибудь может сказать, пока, пока JavaScript снифферы?

Текстовые тени

Я не знал об этом свойстве CSS до недавнего времени, когда я занимался разработкой для iPhone и столкнулся с этим, используемым в библиотеке iUI. Это означает, что вы можете добавлять тени к своему тексту HTML, не прибегая к замене текста, чтобы получить текст с тенями. Как это выглядит в CSS?

h1 {
  text-shadow: #555 3px 3px 4px;
}

Таким образом, первое свойство — это, очевидно, цвет вашей тени, а затем расположение влево / вправо, сверху / снизу и степень размытия.

Размер фона

Что, черт возьми это? Ну, вместо того, чтобы вырывать текст из красиво оформленного прямоугольника с закругленными углами, разве не было бы неплохо, если бы оно масштабировалось с вашим контентом? Если вы добавите -o-background-sizeобъявление в divправило, вы получите то, что известно как задание размера фона. Обратите внимание, однако, что Opera все еще использует экспериментальную версию этого, отсюда и -o-префикс. Webkit и KHTML также имеют экспериментальные реализации (с использованием их -webkit-и -khtml-префиксов)

помутнение

Это так здорово, я не могу ждать, пока все браузеры поддержат это, и его так же легко использовать, как:

div {
  opacity: .5;
}

HSL

Новое цветовое пространство для определения цветовых значений в сети, Hue, Saturation и Lightness. У вас уже есть эта опция в Photoshop навсегда, Opera выводит ее в Интернет через поддержку HSL в CSS3. Почему HSL? Он преодолевает RGB, не подвергаясь влиянию аппаратного обеспечения, и его намного проще прогнозировать. В CSS это реализовано следующим образом:

div {
  background-color: hsl(240, 90%, 50%);
}

переполнение-х и переполнение-у

Лично я считаю, что эта функция, к которой мы уже должны иметь доступ, но, увы, мы должны ждать, пока поддержка не станет достаточно широкой. Но почему? Прямо сейчас вы просто говорите «переполнение»: скрытое и т. Д., Но что, если вы хотите контролировать переполнение в определенном направлении? В настоящее время у вас нет выбора в этом отношении. С CSS3 и в последней версии Opera вы можете контролировать переполнение в любом направлении, будь то верх или низ, вправо или влево.

nav-index, nav-up, nav-down, nav-left и nav-right

Это отличная функция специальных возможностей, и эти свойства позволяют вам указать, на какой элемент будет обращено внимание, когда пользователь нажимает клавиши навигации на клавиатуре. Это особенно полезно, когда элементы абсолютно позиционированы и не следуют друг за другом в порядке исходного кода HTML.

Селектор первого типа

В настоящее время, если вы хотите создать эффект буквицы, вы заключаете символ в <span>. Возможно, вы также дали класс тегу абзаца, а затем использовали псевдо-селектор :: firstletter для создания этого эффекта. Вам больше не придется терпеть эти обходные пути, в Opera 9.5 вы можете использовать селектор первого типа как таковой:

div.article > p:firstof-type::firstletter { }

Opera 9.5 поддерживает множество других аспектов спецификации CSS в диапазоне от 2,0 до 3,0. Подробную информацию см. В документации по поддержке CSS3 на веб-сайте Opera .

Что касается Firefox 3, я, к сожалению, не смог найти подробную информацию о его поддержке вышеупомянутых функций, но со страниц сайта Mozilla это улучшения в Firefox 3:

• displayСвойство это inline-blockи inline-tableзначение теперь реализовано.
• font-size-adjustНедвижимость теперь работает на всех платформах; ранее это поддерживалось только в Windows.
• rgba()и hsla()поддержка color( ошибка 147017 )
• :defaultподдержка псевдокласса ( ошибка 302186 )
• -moz-max-content, -moz-min-content, -moz-fit-content, И -moz-availableзначения , которые были добавлены к width, min-widthи max-width( ошибка 311415 и ошибка 402706 )
• HTML мягкие дефисы ( ­) теперь поддерживаются.
• Предварительно отформатированные вкладки работают намного лучше в пропорциональных шрифтах, следуя спецификации CSS 2.1.
• ime-modeСвойство поддерживается.
• Свойство CSS text-renderingдля HTML теперь поддерживается ( ошибка 387969 ).
• -moz-border-*-startи CSS свойства реализованы ( ошибка 74880 ).-moz-border-*-end
• -moz-initialтеперь реализовано почти для всех свойств CSS (кроме quotesи ) ошибка 80887 .-moz-border-*-colors
• window.getComputedStyle()теперь поддерживает все поддерживаемые свойства CSS ( ошибка 316981 ).
• content«S noneзначение теперь поддерживается ( ошибка 378535 ).
• cursor«S noneзначение теперь поддерживается ( ошибка 346690 ).
• Фоновые изображения теперь правильно обрезаются-moz-border-radius ( ошибка 24998 ).
• white-space«S pre-wrapзначение теперь поддерживается ( ошибка 261081 ).
• Селекторы как : первый ребенок , : только-ребенок , : последний ребенок ( ошибка 73586 ) : пустая ( ошибка 98997 ), или + комбинатор ( ошибка 229915 ) теперь обновляется динамически ( ошибка 401291 ).
• Отрицательные z-indexзначения поддерживаются правильно.