HTML 5 и Internet Explorer 9: новые псевдоклассы и псевдоэлементы
Не знаю, почему это назвали селекторами. Я бы назвал это триггерами, но независимо от названия, эта штука работает в 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>
В результате работы этого примера, на экране отобразиться:
Таким образом, добавив к описанию стиля элемента 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"> Internet Explorer 9 beta </a>
<a href="http://www.microsoft.com"> Microsoft </a>
</body>
</html>
При наведении мышкой на отдельные табы, их фон будет меняться на желтый (сорри, я не дизайнер).
Раньше, чтобы достигнуть такого эффекта, нужно было писать JavaScript, а теперь все просто.
Таким образом, селекторы позволяют реализовать обработку какого-то события, изменяя необходимые стили.
Чтобы посмотреть все псевдоэлементы и псевдоклассы, обратитесь к спецификации. Тема достойна отдельной книги.
[…] […]
Internet Explorer 9 Beta: новые возможности для разработчиков - Alex Krakovetskiy blog - Microsoft User Group Винница
15.09.2010 at 21:38
a:hover {background:yellow;}
При наведении мышкой на отдельные табы, их фон будет меняться на желтый (сорри, я не дизайнер).
Раньше, чтобы достигнуть такого эффекта, нужно было писать JavaScript, а теперь все просто.
чувак, ты с какой планеты??? псевдокласс :hover существует и используется уже хрен знает, сколько лет.
комментатор №1
16.09.2010 at 01:02
И че?:) Это ведь не мешает раскрыть идею? А ссылку на спецификацию я указал. Там возле каждого элемента написан CSS Level.
Sergiy Baydachnyy
16.09.2010 at 07:36