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

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

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 в 19:07

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

Tagged with

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

Subscribe to comments with RSS.

  1. a:hover {background:yellow;}

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

    чувак, ты с какой планеты??? псевдокласс :hover существует и используется уже хрен знает, сколько лет.

    комментатор №1

    16.09.2010 at 01:02

    • И че?:) Это ведь не мешает раскрыть идею? А ссылку на спецификацию я указал. Там возле каждого элемента написан CSS Level.

      Sergiy Baydachnyy

      16.09.2010 at 07:36


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: