Блог Сергея Байдачного

Мой блог о технологиях

Archive for Сентябрь 14th, 2010

HTML 5 и Internet Explorer 9: новые псевдоклассы и псевдоэлементы

3 комментария

Не знаю, почему это назвали селекторами. Я бы назвал это триггерами, но независимо от названия, эта штука работает в Internet Explorer 9. Итак, согласно спецификации w3c.org (http://www.w3.org/TR/css3-selectors/) разработчики теперь могут пользоваться селекторами. Сразу перехожу к примеру:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
p:first-letter
    {
    font-size:xx-large;
    }
}
</style>
</head>

<body>
    <p>Hello</p>
</body>
</html>

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

image

Таким образом, добавив к описанию стиля элемента p псевдоэлемент :first-letter, мы определили стиль, который будет применяться при возникновении некоего события – первая буква в элементе p.

А вот и еще один пример:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
    {
    border-radius: 10em 10em 0em 0em/ 15em 15em 0em 0em;
    border:3px red solid;
    }
   
a:hover
    {
    background:yellow;
    }
}
</style>
</head>

<body>
    <a href="
http://ietestdrive.com">&nbsp;&nbsp;Internet Explorer 9 beta&nbsp;&nbsp;</a>
    <a href="
http://www.microsoft.com">&nbsp;&nbsp;Microsoft&nbsp;&nbsp;</a>
</body>
</html>

При наведении мышкой на отдельные табы, их фон будет меняться на желтый (сорри, я не дизайнер).

image

Раньше, чтобы достигнуть такого эффекта, нужно было писать JavaScript, а теперь все просто.

Таким образом, селекторы позволяют реализовать обработку какого-то события, изменяя необходимые стили.

Чтобы посмотреть все псевдоэлементы и псевдоклассы, обратитесь к спецификации. Тема достойна отдельной книги.

Written by Sergiy Baydachnyy

14.09.2010 at 19:07

Опубликовано в Internet Explorer 9

Tagged with

HTML 5 и Internet Explorer 9: Border Radius

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

Начну обзор возможностей для разработчиков в Internet Explorer 9 с border radius. Речь идет о новых стилях, позволяющих предать «закругленную» форму бордюру у любого элемента. Открыв свеженькую книгу по HTML 5, я обнаружил, что border radius в альтернативных браузерах описывается атрибутами, которые полностью отличаются от тех, что описаны на w3c.org (http://www.w3.org/TR/css3-background/#the-border-radius). Поэтому, не долго думая, я открыл Internet Explorer 9 и попробовал использовать текущие рекомендации. Вот первый пример, который мне удалось написать:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
{
border-radius: 10em;
border:3px red solid;
}
}
</style>
</head>
<body>
<a href="
http://ietestdrive.com">Internet Explorer 9 beta</a>
</body>
</html>

Работает! На экране отобразилось то, что я и ожидал:

image

Если немного модифицировать код:

a
{
border-radius: 10em / 20em;
border:3px red solid;
}

То наш бордюр немного «сплющивается»:

image

Это происходит от того, что border-radius позволяет задать закругления с помощью эллипсов, которые в свою очередь описываются двумя радиусами. Поэтому, если мы задаем одно значение, то закругления описываются с помощью окружностей. А вот если мы задаем два значения, разделяя их косой чертой, то тут уже появляется настоящий эллипс.

С таким же успехом мы можем задать закругление для каждого из углов отдельно. Для этого перечисляем все значения через пробел. Отчет начинается с верхнего левого угла. Если Вы указали три или меньше значений, то недостающие значения заполняются на основе заданных (слева-направо). Ниже пример, демонстрирующий создание закладок:

<!DOCTYPE html>
<html>
<head>
<title>Internet Explorer 9 beta</title>
<style type="text/css">
a
    {
    border-radius: 10em 10em 0em 0em/ 15em 15em 0em 0em;
    border:3px red solid;
    }
}
</style>
</head>

<body>
    <a href="
http://ietestdrive.com">&nbsp;&nbsp;Internet Explorer 9 beta&nbsp;&nbsp;</a>
    <a href="
http://www.microsoft.com">&nbsp;&nbsp;Microsoft&nbsp;&nbsp;</a>
</body>
</html>

image

Тут нули указывать обязательно, либо вместо них будут подставлены 10 и 15 соответственно.

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

border-top-left-radius:     10em 15em;
border-top-right-radius:    10em 15em;
border-bottom-right-radius: 10em 15em;
border-bottom-left-radius:  10em 15em;

Вот такой border-radius.

Written by Sergiy Baydachnyy

14.09.2010 at 18:17

Опубликовано в Internet Explorer 9

Tagged with