Ads
Comments 105
+1
Коротко и ясно! Честно избегал псевдоклассов в ие. Теперь один стоит взять на заметку!
+2
спасиба, недавно ломал голову, пытаясь понять почему мои стили не работали в ие... оказалось все так просто, что хочется кого-то ударить...
+1
сам давно и успешно использовал :first-letter, но вот про такие хитрости с пробелами... и ЭТО не исправили! позор Microsoft.
0
да. я уже посмотрел. но прошло что-то около шести лет, если мне не изменяет память...
0
ну на самом деле если помните в IE6 даже в процессе исправлений возникали ещё более курьезные баги :) а так как немногие пользовались этим псевдоклассом, то и важность бага сошла на нет :)
0
Класс!!! Я всегда был уверен что двойные бэкграунды в css невозможны.
Автор, спасибо тебе! Большое человеческое!

Пошел гуглить по псевдоклассам...
UFO landed and left these words here
UFO landed and left these words here
0
Вот оно! Отсутствие внимания со стороны противоположного пола
0
Спасибо! Обязательно возьму на заметку... Видимо я один, кто этот Псевдокласс использовал реально для стилизации первой буквы абзаца.. :)
0
Большое спасибо, действительно очень полезно. IE в своем репертуаре...
0
не знаю почему, но я всегда фигурную скобку отделяю от имён пробелом, причём неважно CSS это или Java или JavaScript

но полезность статьи это не уменьшает :)) - спасибо
+1
Теперь придется еще и запятые от слов отделять. На всякий случай. :)
+2
Не ожидал, что стиль, по сути предназначенный для буквицы, может быть использован таким вот образом, да еще и в IE 6 работает.

Очень полезная вещь. Респект автору!
+1
Спасибо. Для списков и редких вставок, просто замечательное решение.
0
Но только не для нумерованых списков (ol), так как в них :first-letter распространяется и на порядковую цифру, и на первую букву.
0
Эти дикообразы, похоже, включили пробел в ключевое слово для парсера.
Надо же было умудриться.
0
"Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой"
Ие НЕ АДЕКВАТН =)
0
рекомендуют здесь не все вокруг воспринимать адекватно (с)
0
Единственный вопрос:
background: url(/images/star.jpg) left center no-repeat;

а почему center а не middle? Вроде же по горизонтали left, center, right, по вертикали - top, middle, bottom.
0
Будем считать недокументированной функцией =)
Да и путаницы при кратком написании background:; так меньше.
0
Это все равно неправильно, потому что надо указывать в обратном порядке — background-position: top left, а не left top :) В данном случае браузер вам простит, а вот если будете указывать смещение в пикселях или процентах — увидите ошибку.

Я сам сегодня в одной из своих версток увидел, ага :))
+1
Если по спекам, то вы правы, сначала top, а потом left. На деле же я никакой разницы не вижу, всегда пишу наоборот, везде работает.
-1
Еще раз: если вы напишете не top left, а, скажем, 10px 20px, то сразу увидите ошибку. 10 пикселей будет отсчитываться _сверху_, а не слева.
0
То есть то, что я проверил в браузере на всякий случай тоже неправильно? Все мои браузеры работают не так?
0
То есть вы хотите сказать, что проверили background-position: Npx Mpx, и N пикселей у вас в браузере отсчитывается СЛЕВА, а М пикселей отсчитывается СВЕРХУ? Я правильно понял?
0
Да, и в background: url(...) no-repeat 10px 100px; получается left top, и в background-position.
0
Ничего страшного. Я просто часто с этими параметрами работаю. Я не доверяю своей памяти, поэтом проверяю. Но доверяю своим глазам :)
0
В том-то и дело, что я тоже буквально позавчера перепутал эти параметры местами, и уже в который раз попытался запомнить правильный порядок :)
И опять не получилось :))
0
А я когда последний раз перепутал, как раз и запомнил правильно :) Запоминается легко. Всё всегда начинается с ширины, потом высота. Что картинки, что координаты - XY. Поэтому первым идёт X - слева-направо, сверху-вниз :)
UFO landed and left these words here
0
top и left просто ключевые слова, которые UA толкует однозначно, в каком бы порядке вы их ни написали. Но порядок в дому нужОн!
0
есть замечательные псевдоклассы :before и :after и замечательнейшая вещь content:

h1:before{
content: "*"
};

:-)
0
если что, в content вставлять картинки тоже :)
h1: before{
content: url('img.gif');
};
0
Насколько я помню, и близко не работает. Тож лень проверять :)
0
Не работает во всех IE. Недавно буквально искал. Причем не нашел даже хаков.
0
Ай-да молодца! Спасибо огромное! Две фоновых картинки довольно часто хочется сделать и приходится извращаться.
0
В вашем примере ie6 нервно курит в сторонке. А немощных и убогих обижать нехорошо... )
0
Ну да, верно. Хотя есть же условные комментарии и js. Или это совсем зло?
0
Нет, что вы, какое же это зло? ) Это благо, что они есть, просто я например, стараюсь js для верстки не использовать без особой нужды. У этого языка немного иное предназначение. А CC - всегда и везде. И всем рекомендую.
0
Кстати, я думаю, при особом желании можно подверстать три картинки на фон… Или в ie6 first-line тоже не пашет?
0
На сколько я помню - поддерживает, но могу ошибаться. Давно не пробовал просто.
0
Пашет, но совсем не так как хотелось бы. padding на него не повесить. По разному воспринимаются отступы у родителя.
0
padding на него вешается о спокойно, но считается по-другому немного. Я пока что по наитию / методом тыка умудряюсь добиться результата, надо будет уточнить несколько моментов.
0
кроссбраузерно по пиксельно соединить два bg у меня получается только когда пишешь отдельные margin и padding для ослов. А я подобные манипуляции на дух не переношу.

>> Извини, не могу пока в блоге ответить - >> хостер под ddos-атакой.

Словами одного программера.
— Макс, прикинь мою прогу взломали! *радостно*

— Ну и чего ты радуешся?

— Ну прикинь, значит кому-то надо. Значит востребованно, не зря старался.

Так что поздравляю, ты звизда! ))
0
Я всегда подключаю еще два файла стилей для ie6/7, так что еще пару строк не страшно.
А по поводу атаки, это ж не на меня, а на хостера ;)
-1
Из статьи полезно только начало.

Дальше только обращается внимание на то, что если не соблюдать синтаксис CSS, то будут проблемы.

Но все равно плюсодин)

Я сам вот все хочу написать про IE и проиллюстрировать на примере готового проекта, но карма(
UFO landed and left these words here
0
Не будем опускаться до оскорблений, в чем я не прав? Я знаю еще несколько случаев, когда при неправильном написании правило работает в ФФ и Опере, а в ИЕ не работает.
0
Ну зачем же ВЫ так?
После перед фигурой скобкой пробел нужен и это видно по любому из примеро на w3с, не нужно углубляться в спецификацию (http://www.w3.org/TR/CSS21/about.html#sh…).
А насчет нытья - 4g3n7 ведь написал что хоxtn написать про IE и естесвенно во избежание нападков пояснил, почему еще не сделал этого.
0
Спасибо=) Если доведется использовать - буду уже знать, что делать. Хотя возможно и не заметил бы, т. к. всегда ставлю пробелы.
+1
рекомендую всем самостоятельно проверить тезис о необходимости пробела:

<style>
h1:first-letter{text-decoration:underline;}
</style>
<h1>hello</h1>


&mdash; работает в IE6

хотя я тоже поверил:-), решил лишь посмотреть прокатит ли \t
0
Задумался и тоже проверил. Работает начиная с 5.5. Проверил в портативных версиях 3.0, 4.01, 5.01, 5.5, 6.0. Затем проверил в 6.0 со всеми автоапдейтами.
Может кто еще проверит или сможет прояснить чем ту подвох?
0
я на двух машинах проверил
пришла пора спросить &laquo;Автор, что у тебя за браузер?&raquo;
0
может, потому, что всё в одну строку?
и ещё, попробуй баг с запятой.
0
одна строка — лишь для компактности
всё работает во всех позициях
UFO landed and left these words here
0
Все очень просто!
Попробуй проставить доктайп - тогда не будет работать.
0
Срост! только как фоновые картинки будут между собой согласовываться, ну т.е. кто слоем выше будет, тот кто в цсс позже прописан? и еще а с еще одним псевдоклассом, например с :hover совмещать можно? было бы клево!
-1
Семантически неправильное использование псевдокласса - no way.
+2
стили у нас предназначены для стилей, там искать семантику - это уже перебор, имхо. семантика - это относительно информации. а стиль в себе информацию не должен нести.
0
Ну хорошо, если вы сами пишете CSS и вам нравится такой метод - пожалуйста. Но пожалейте других людей - такой код
+1
Всё ОК. Думаю, иногда этот способ лучше, чем классический - div в div.
0
таким образом разработчики IE учат нас писать аккуратно и по правилам :)
0
Да, все работает, но если мы напишем .class1 .class2 h3:first-letter {...} даже с пробелом ИЕ6 откажется работать
0
Такие конструкции IE6 не понимает даже без :first-letter. Или я вас не совсем верно понял. Вы имеете в виду двойной класс?
0
Нет, не двойной класс, а просто последовательность вложенных элементов. Например div .myclass h3
0
Это очень подозрительно. У меня такая последовательность сработала без проблем
0
хм, буду пробовать. Просто h3:first-letter {...} (без иерархии) работает без проблем, а если задавать последовательность, то не работает
0
спасибо за статью, помоему реально первый полезный для меня пост за несколько месяцев… уж очень много стало появляться на хабре всяких перепечаток и банальных методов, которыми мало кого удивишь =)
Only those users with full accounts are able to leave comments.  , please.