Opera 9.5 для разработчиков

С версией 9.5 Опера полностью перешла на новый движок Core-2. Теперь Opera Kestrel может предложить разработчикам несколько новых фич для использования на сайтах. Уже сейчас Вы можете оценить новые фишки CSS3, SVG и новый движок для Javascript.

Скажи привет CSS3-селекторам

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

Исполосуй таблицы

Чередовать цвета строк в таблицах — довольно популярная идея последних лет. Обычно это требовало Javascript, либо создание класса для каждой стилизованной альтернативным цветом строки. Теперь это может быть сделано с помощью nth-child (или nth-of-type)

Например,

#playlist tr:nthchild(odd) td {
background-color: #edf3fe;
}

Обратите внимание на слово odd, означающее нечетность. Обратно, используйте even. Кроме того, в скобках можно указывать номер строки, или (!) подобие формул, например, 2n+1.

И в воздух чепчики бросали

Drop cap, или, по-русски, заглавная буква (литера) текста. Эта такая огромная буква, которая часто встречается в начале главы книги. В интернете обычно ее выделяют с помощью отдельного блока для первой буквы. Теперь можно использовать псевдоэлемент ::firstletter. Надо не забывать, что в любом случае, для заглавной буквы нужен класс

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

Это охватывает первую букву параграфа p, прямого наследника div.article.

Динамические медиа-запросы

Медиа-запросы используются для получения информации о системе пользователя. Зная ее, можно по-новому выстраивать дизайн. Эта идея часто используется в случае доступа к сайту через мобильное устройство. В Кестреле медиа-запросы динамические. Это означает, что они вызываются каждый раз при поставленном на них событии, например, при изменении размера окон.

@media screen and (max-width: 730px) {

h1 { font-size: 2em; }

.figure {
float: none;
margin: 0 10%;
}

.figure p { display: none; }

.figure img {
max-width: 95%;
height: auto;
padding-bottom: 5px;
}
}

Закругленные углы

Как известно, CSS поддерживает закругления с помощью свойства border-radius. Пока это не работает, Опера спредлагает выход с помощью SVG. Пример:

CSS:

background: silver url("../images/roundedcorners2.svg");
-webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em;

SVG:

<rect fill=«white» x=«0» y=«0» width=«100%» height=«100%» />
<rect fill=«silver» x=«0» y=«0» width=«100%» height=«100%» rx=«1em»/>

Браузер, не поддерживающий SVG начнет строить закругления с помощью border-radius, если, конечно, поддерживает. Если нет, то все останется квадратным.

Градиент

В Опере теперь существует способ зарисовки градиента с помощью того же SVG. Это отлично подходит для ситуации с масштабированием. Спасают векторы :).

Пример использует цвет rgb как фон для неподдерживающих такой способ браузеров и SVG — для Оперы:
CSS

#playlist tr:firstof-type { background: rgb(187,187,187) url("../images/gradient.svg"); }

SVG:

<defs>
<linearGradient id=«grad» x1=«0%» y1=«0%» x2=«0%» y2=«100%»>
<stop offset=«30%» style=«stop-color: rgb(219,219,219);»/>
<stop offset=«90%» style=«stop-color: rgb(187,187,187);»/>
</linearGradient>
</defs>

<rect fill=«url(#grad)» x=«0» y=«0» width=«100%» height=«100%» />

Новый Javascript

Движок Javascript в очередной раз стал быстрее, менее бажным и более функциональным. Например, решены некоторые проблемы с оформленным текстом. Появилась поддержка Node.compareDocumentPosition из DOM3 и Range.comparePoint из Gecko DOM. Они оба используются Google Pages. Добавлены getters и setters Javascript 1.5, что улучшает работу с Yahoo! mail и Microsoft Live.

Также теперь можно пользоваться популярной функцией getElementsByClassName из HTML5, что избавляет от необходимости писать свою библиотеку.

Вывод

Работа кипит! ;)
Оригинал