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