Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 105
Коротко и ясно! Честно избегал псевдоклассов в ие. Теперь один стоит взять на заметку!
Интересненько. Надо будет посмотреть поближе…
спасиба, недавно ломал голову, пытаясь понять почему мои стили не работали в ие... оказалось все так просто, что хочется кого-то ударить...
Очень полезная заметка. Спасибо
сам давно и успешно использовал :first-letter, но вот про такие хитрости с пробелами... и ЭТО не исправили! позор Microsoft.
В IE7 это исправили.
ну на самом деле если помните в IE6 даже в процессе исправлений возникали ещё более курьезные баги :) а так как немногие пользовались этим псевдоклассом, то и важность бага сошла на нет :)
ну в общем да… там многими классами не пользуются…
вот свежайший пример: www.opennet.ru/opennews/art.shtml?num=23268
вот свежайший пример: www.opennet.ru/opennews/art.shtml?num=23268
гениально! спасибо, должно заметно облегчить жизнь :)
+1
я думаю вам стоит почитать это http://ru.wikipedia.org/wiki/%D0%A4%D0%B…
Класс!!! Я всегда был уверен что двойные бэкграунды в css невозможны.
Автор, спасибо тебе! Большое человеческое!
Пошел гуглить по псевдоклассам...
Автор, спасибо тебе! Большое человеческое!
Пошел гуглить по псевдоклассам...
Спасибо! Обязательно возьму на заметку... Видимо я один, кто этот Псевдокласс использовал реально для стилизации первой буквы абзаца.. :)
спасибо!
Большое спасибо, действительно очень полезно. IE в своем репертуаре...
Не ожидал, что стиль, по сути предназначенный для буквицы, может быть использован таким вот образом, да еще и в IE 6 работает.
Очень полезная вещь. Респект автору!
Очень полезная вещь. Респект автору!
Спасибо за полезную информацию. Уже начинаем использовать :)
Спасибо за полезный пост.
Я и не додумался бы :)
Спасибо.
Спасибо.
Интересно.
Еще бы :second-letter :)
Еще бы :second-letter :)
Спасибо. Для списков и редких вставок, просто замечательное решение.
Эти дикообразы, похоже, включили пробел в ключевое слово для парсера.
Надо же было умудриться.
Надо же было умудриться.
Спасибо, буду использовать =)
"Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой"
Ие НЕ АДЕКВАТН =)
Ие НЕ АДЕКВАТН =)
Коротко и по делу.
Единственный вопрос:
background: url(/images/star.jpg) left center no-repeat;
а почему center а не middle? Вроде же по горизонтали left, center, right, по вертикали - top, middle, bottom.
background: url(/images/star.jpg) left center no-repeat;
а почему center а не middle? Вроде же по горизонтали left, center, right, по вертикали - top, middle, bottom.
http://www.w3.org/TR/CSS21/colors.html
http://www.w3schools.com/css/pr_backgrou…
middle вобще в спецификации отсутствует.
http://www.w3schools.com/css/pr_backgrou…
middle вобще в спецификации отсутствует.
Будем считать недокументированной функцией =)
Да и путаницы при кратком написании background:; так меньше.
Да и путаницы при кратком написании background:; так меньше.
Это все равно неправильно, потому что надо указывать в обратном порядке — background-position: top left, а не left top :) В данном случае браузер вам простит, а вот если будете указывать смещение в пикселях или процентах — увидите ошибку.
Я сам сегодня в одной из своих версток увидел, ага :))
Я сам сегодня в одной из своих версток увидел, ага :))
Если по спекам, то вы правы, сначала top, а потом left. На деле же я никакой разницы не вижу, всегда пишу наоборот, везде работает.
Еще раз: если вы напишете не top left, а, скажем, 10px 20px, то сразу увидите ошибку. 10 пикселей будет отсчитываться _сверху_, а не слева.
Как раз наоборот. Сначала left, потом top
Читайте мануалы :)
То есть то, что я проверил в браузере на всякий случай тоже неправильно? Все мои браузеры работают не так?
То есть вы хотите сказать, что проверили background-position: Npx Mpx, и N пикселей у вас в браузере отсчитывается СЛЕВА, а М пикселей отсчитывается СВЕРХУ? Я правильно понял?
Да, и в background: url(...) no-repeat 10px 100px; получается left top, и в background-position.
Хм, похоже ваша правда. Простите.
Ничего страшного. Я просто часто с этими параметрами работаю. Я не доверяю своей памяти, поэтом проверяю. Но доверяю своим глазам :)
top и left просто ключевые слова, которые UA толкует однозначно, в каком бы порядке вы их ни написали. Но порядок в дому нужОн!
есть замечательные псевдоклассы :before и :after и замечательнейшая вещь content:
h1:before{
content: "*"
};
:-)
h1:before{
content: "*"
};
:-)
если что, в content вставлять картинки тоже :)
h1: before{
content: url('img.gif');
};
h1: before{
content: url('img.gif');
};
А в шестом осле это работает?
нет его под рукой проверить
Насколько я помню, и близко не работает. Тож лень проверять :)
Абсолютно точно не работает.
Не работает во всех IE. Недавно буквально искал. Причем не нашел даже хаков.
expression, хороший хак
можно пример?
.content-before
{
zoom : expression(runtimeStyle.zoom = 1,
insertAdjacentHTML('beforeEnd', '<div class="hr"></div>')
}
expression
Ай-да молодца! Спасибо огромное! Две фоновых картинки довольно часто хочется сделать и приходится извращаться.
Так можно даже четыре…
В вашем примере ie6 нервно курит в сторонке. А немощных и убогих обижать нехорошо... )
Ну да, верно. Хотя есть же условные комментарии и js. Или это совсем зло?
Нет, что вы, какое же это зло? ) Это благо, что они есть, просто я например, стараюсь js для верстки не использовать без особой нужды. У этого языка немного иное предназначение. А CC - всегда и везде. И всем рекомендую.
Кстати, я думаю, при особом желании можно подверстать три картинки на фон… Или в ie6 first-line тоже не пашет?
На сколько я помню - поддерживает, но могу ошибаться. Давно не пробовал просто.
Пашет, но совсем не так как хотелось бы. padding на него не повесить. По разному воспринимаются отступы у родителя.
padding на него вешается о спокойно, но считается по-другому немного. Я пока что по наитию / методом тыка умудряюсь добиться результата, надо будет уточнить несколько моментов.
Извини, не могу пока в блоге ответить - хостер под ddos-атакой.
кроссбраузерно по пиксельно соединить два bg у меня получается только когда пишешь отдельные margin и padding для ослов. А я подобные манипуляции на дух не переношу.
>> Извини, не могу пока в блоге ответить - >> хостер под ddos-атакой.
Словами одного программера.
— Макс, прикинь мою прогу взломали! *радостно*
— Ну и чего ты радуешся?
— Ну прикинь, значит кому-то надо. Значит востребованно, не зря старался.
Так что поздравляю, ты звизда! ))
>> Извини, не могу пока в блоге ответить - >> хостер под ddos-атакой.
Словами одного программера.
— Макс, прикинь мою прогу взломали! *радостно*
— Ну и чего ты радуешся?
— Ну прикинь, значит кому-то надо. Значит востребованно, не зря старался.
Так что поздравляю, ты звизда! ))
Из статьи полезно только начало.
Дальше только обращается внимание на то, что если не соблюдать синтаксис CSS, то будут проблемы.
Но все равно плюсодин)
Я сам вот все хочу написать про IE и проиллюстрировать на примере готового проекта, но карма(
Дальше только обращается внимание на то, что если не соблюдать синтаксис CSS, то будут проблемы.
Но все равно плюсодин)
Я сам вот все хочу написать про IE и проиллюстрировать на примере готового проекта, но карма(
Не будем опускаться до оскорблений, в чем я не прав? Я знаю еще несколько случаев, когда при неправильном написании правило работает в ФФ и Опере, а в ИЕ не работает.
Ну зачем же ВЫ так?
После перед фигурой скобкой пробел нужен и это видно по любому из примеро на w3с, не нужно углубляться в спецификацию (http://www.w3.org/TR/CSS21/about.html#sh…).
А насчет нытья - 4g3n7 ведь написал что хоxtn написать про IE и естесвенно во избежание нападков пояснил, почему еще не сделал этого.
После перед фигурой скобкой пробел нужен и это видно по любому из примеро на w3с, не нужно углубляться в спецификацию (http://www.w3.org/TR/CSS21/about.html#sh…).
А насчет нытья - 4g3n7 ведь написал что хоxtn написать про IE и естесвенно во избежание нападков пояснил, почему еще не сделал этого.
то, что в примерах ставят пробел не означает, что он *обязателен*... смотрите грамматику http://www.w3.org/TR/CSS21/grammar.html
Спасибо=) Если доведется использовать - буду уже знать, что делать. Хотя возможно и не заметил бы, т. к. всегда ставлю пробелы.
Отлично, незнал такого...респект автору :)
рекомендую всем самостоятельно проверить тезис о необходимости пробела:
— работает в IE6
хотя я тоже поверил:-), решил лишь посмотреть прокатит ли \t
<style>
h1:first-letter{text-decoration:underline;}
</style>
<h1>hello</h1>— работает в IE6
хотя я тоже поверил:-), решил лишь посмотреть прокатит ли \t
( XP SP2 )
Задумался и тоже проверил. Работает начиная с 5.5. Проверил в портативных версиях 3.0, 4.01, 5.01, 5.5, 6.0. Затем проверил в 6.0 со всеми автоапдейтами.
Может кто еще проверит или сможет прояснить чем ту подвох?
Может кто еще проверит или сможет прояснить чем ту подвох?
может, потому, что всё в одну строку?
и ещё, попробуй баг с запятой.
и ещё, попробуй баг с запятой.
Все очень просто!
Попробуй проставить доктайп - тогда не будет работать.
Попробуй проставить доктайп - тогда не будет работать.
Срост! только как фоновые картинки будут между собой согласовываться, ну т.е. кто слоем выше будет, тот кто в цсс позже прописан? и еще а с еще одним псевдоклассом, например с :hover совмещать можно? было бы клево!
Семантически неправильное использование псевдокласса - no way.
таким образом разработчики IE учат нас писать аккуратно и по правилам :)
Да, все работает, но если мы напишем .class1 .class2 h3:first-letter {...} даже с пробелом ИЕ6 откажется работать
спасибо за статью, помоему реально первый полезный для меня пост за несколько месяцев… уж очень много стало появляться на хабре всяких перепечаток и банальных методов, которыми мало кого удивишь =)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Псевдокласс: first-letter