CurlyBrace Dec 20 2007 at 14:02

Псевдокласс: first-letter

1 min

7.6K

CSS*

+67

105

Comments 105

tarampampam Dec 20 2007 at 14:19

Коротко и ясно! Честно избегал псевдоклассов в ие. Теперь один стоит взять на заметку!

Lynn Dec 20 2007 at 14:20

Интересненько. Надо будет посмотреть поближе…

ashofthedream Dec 20 2007 at 14:29

спасиба, недавно ломал голову, пытаясь понять почему мои стили не работали в ие... оказалось все так просто, что хочется кого-то ударить...

sphere Dec 20 2007 at 17:32

Вот за это ie я особенно люблю.

Denys Dec 20 2007 at 19:01

...коробку с дистрибутивом Окон =D

aleks_t Dec 20 2007 at 14:45

Очень полезная заметка. Спасибо

aim Dec 20 2007 at 14:56

сам давно и успешно использовал :first-letter, но вот про такие хитрости с пробелами... и ЭТО не исправили! позор Microsoft.

CurlyBrace Dec 20 2007 at 14:59

В IE7 это исправили.

aim Dec 20 2007 at 15:03

да. я уже посмотрел. но прошло что-то около шести лет, если мне не изменяет память...

CurlyBrace Dec 20 2007 at 15:07

Ну тут с вами только глупец поспорит ))

kocten Sep 3 2009 at 12:03

ну на самом деле если помните в IE6 даже в процессе исправлений возникали ещё более курьезные баги :) а так как немногие пользовались этим псевдоклассом, то и важность бага сошла на нет :)

aim Sep 3 2009 at 13:48

ну в общем да… там многими классами не пользуются…

вот свежайший пример: www.opennet.ru/opennews/art.shtml?num=23268

leviathan Dec 20 2007 at 15:20

гениально! спасибо, должно заметно облегчить жизнь :)

maxus_w Dec 20 2007 at 15:22

magicstream Dec 20 2007 at 16:47

я думаю вам стоит почитать это http://ru.wikipedia.org/wiki/%D0%A4%D0%B…

peroon2 Dec 20 2007 at 15:22

Класс!!! Я всегда был уверен что двойные бэкграунды в css невозможны.
Автор, спасибо тебе! Большое человеческое!

Пошел гуглить по псевдоклассам...

UFO just landed and posted this here

CurlyBrace Dec 20 2007 at 15:32

Прям Каскадные Таблицы Сисек...

UFO just landed and posted this here

alkeeper Dec 20 2007 at 15:49

Вот оно! Отсутствие внимания со стороны противоположного пола

andrew_b Dec 20 2007 at 15:28

Спасибо! Обязательно возьму на заметку... Видимо я один, кто этот Псевдокласс использовал реально для стилизации первой буквы абзаца.. :)

k0t_igrun Dec 20 2007 at 15:38

спасибо!

xalexx Dec 20 2007 at 15:46

Большое спасибо, действительно очень полезно. IE в своем репертуаре...

UFO just landed and posted this here

alias Dec 20 2007 at 18:19

Теперь придется еще и запятые от слов отделять. На всякий случай. :)

Dimox Dec 20 2007 at 16:15

Не ожидал, что стиль, по сути предназначенный для буквицы, может быть использован таким вот образом, да еще и в IE 6 работает.

Очень полезная вещь. Респект автору!

dmitriykikkas Dec 20 2007 at 16:22

Спасибо за полезную информацию. Уже начинаем использовать :)

dreikanter Dec 20 2007 at 16:24

Спасибо за полезный пост.

Nightquest Dec 20 2007 at 16:53

Я и не додумался бы :)
Спасибо.

aminis Dec 20 2007 at 17:38

Интересно.
Еще бы :second-letter :)

lusever Dec 20 2007 at 17:52

Спасибо. Для списков и редких вставок, просто замечательное решение.

CurlyBrace Dec 20 2007 at 17:54

Но только не для нумерованых списков (ol), так как в них :first-letter распространяется и на порядковую цифру, и на первую букву.

sphere Dec 20 2007 at 18:02

Эти дикообразы, похоже, включили пробел в ключевое слово для парсера.
Надо же было умудриться.

Stanislav_KiteKat Dec 20 2007 at 18:16

Спасибо, буду использовать =)

sr_perm Dec 20 2007 at 18:17

"Самый важный момент здесь в том, что нужно обязательно поставить пробел между самим псевдоклассом :first-letter и открывающей фигурной скобкой"
Ие НЕ АДЕКВАТН =)

XXXVII Dec 21 2007 at 08:51

рекомендуют здесь не все вокруг воспринимать адекватно (с)

deerstop Dec 20 2007 at 18:18

Коротко и по делу.

Stanislav_KiteKat Dec 20 2007 at 18:21

Единственный вопрос:
background: url(/images/star.jpg) left center no-repeat;

а почему center а не middle? Вроде же по горизонтали left, center, right, по вертикали - top, middle, bottom.

CurlyBrace Dec 20 2007 at 18:38

http://www.w3.org/TR/CSS21/colors.html
http://www.w3schools.com/css/pr_backgrou…

middle вобще в спецификации отсутствует.

Stanislav_KiteKat Dec 20 2007 at 18:59

Будем считать недокументированной функцией =)
Да и путаницы при кратком написании background:; так меньше.

BeeVee Dec 20 2007 at 21:25

Это все равно неправильно, потому что надо указывать в обратном порядке — background-position: top left, а не left top :) В данном случае браузер вам простит, а вот если будете указывать смещение в пикселях или процентах — увидите ошибку.

Я сам сегодня в одной из своих версток увидел, ага :))

CurlyBrace Dec 20 2007 at 23:34

Если по спекам, то вы правы, сначала top, а потом left. На деле же я никакой разницы не вижу, всегда пишу наоборот, везде работает.

BeeVee Dec 21 2007 at 08:38

Еще раз: если вы напишете не top left, а, скажем, 10px 20px, то сразу увидите ошибку. 10 пикселей будет отсчитываться _сверху_, а не слева.

MOVe Dec 21 2007 at 12:01

Как раз наоборот. Сначала left, потом top

BeeVee Dec 21 2007 at 15:31

Читайте мануалы :)

MOVe Dec 21 2007 at 17:05

То есть то, что я проверил в браузере на всякий случай тоже неправильно? Все мои браузеры работают не так?

BeeVee Dec 21 2007 at 18:48

То есть вы хотите сказать, что проверили background-position: Npx Mpx, и N пикселей у вас в браузере отсчитывается СЛЕВА, а М пикселей отсчитывается СВЕРХУ? Я правильно понял?

MOVe Dec 21 2007 at 19:12

Да, и в background: url(...) no-repeat 10px 100px; получается left top, и в background-position.

BeeVee Dec 21 2007 at 19:16

Хм, похоже ваша правда. Простите.

MOVe Dec 21 2007 at 19:18

Ничего страшного. Я просто часто с этими параметрами работаю. Я не доверяю своей памяти, поэтом проверяю. Но доверяю своим глазам :)

BeeVee Dec 21 2007 at 19:26

В том-то и дело, что я тоже буквально позавчера перепутал эти параметры местами, и уже в который раз попытался запомнить правильный порядок :)
И опять не получилось :))

MOVe Dec 21 2007 at 20:04

А я когда последний раз перепутал, как раз и запомнил правильно :) Запоминается легко. Всё всегда начинается с ширины, потом высота. Что картинки, что координаты - XY. Поэтому первым идёт X - слева-направо, сверху-вниз :)

UFO just landed and posted this here

rimmer333 Dec 21 2007 at 10:19

top и left просто ключевые слова, которые UA толкует однозначно, в каком бы порядке вы их ни написали. Но порядок в дому нужОн!

xiWera Dec 20 2007 at 18:56

есть замечательные псевдоклассы :before и :after и замечательнейшая вещь content:

h1:before{
content: "*"
};

:-)

xiWera Dec 20 2007 at 19:08

если что, в content вставлять картинки тоже :)
h1: before{
content: url('img.gif');
};

davojan Dec 20 2007 at 20:00

А в шестом осле это работает?

xiWera Dec 20 2007 at 20:06

нет его под рукой проверить

davojan Dec 20 2007 at 20:21

Насколько я помню, и близко не работает. Тож лень проверять :)

BeeVee Dec 20 2007 at 21:27

Абсолютно точно не работает.

XXXVII Dec 21 2007 at 08:53

Не работает во всех IE. Недавно буквально искал. Причем не нашел даже хаков.

lusever Dec 21 2007 at 13:14

expression, хороший хак

XXXVII Dec 21 2007 at 13:15

можно пример?

lusever Dec 21 2007 at 13:46

.content-before

{

	zoom	: expression(runtimeStyle.zoom = 1,

				insertAdjacentHTML('beforeEnd', '<div class="hr"></div>')

}

expression

davojan Dec 20 2007 at 19:26

Ай-да молодца! Спасибо огромное! Две фоновых картинки довольно часто хочется сделать и приходится извращаться.

Devgru Dec 20 2007 at 23:31

Так можно даже четыре…

CurlyBrace Dec 20 2007 at 23:35

В вашем примере ie6 нервно курит в сторонке. А немощных и убогих обижать нехорошо... )

Devgru Dec 20 2007 at 23:42

Ну да, верно. Хотя есть же условные комментарии и js. Или это совсем зло?

CurlyBrace Dec 20 2007 at 23:45

Нет, что вы, какое же это зло? ) Это благо, что они есть, просто я например, стараюсь js для верстки не использовать без особой нужды. У этого языка немного иное предназначение. А CC - всегда и везде. И всем рекомендую.

Devgru Dec 20 2007 at 23:56

Кстати, я думаю, при особом желании можно подверстать три картинки на фон… Или в ie6 first-line тоже не пашет?

CurlyBrace Dec 21 2007 at 00:02

На сколько я помню - поддерживает, но могу ошибаться. Давно не пробовал просто.

leMar Dec 21 2007 at 01:52

Пашет, но совсем не так как хотелось бы. padding на него не повесить. По разному воспринимаются отступы у родителя.

CurlyBrace Dec 21 2007 at 01:56

padding на него вешается о спокойно, но считается по-другому немного. Я пока что по наитию / методом тыка умудряюсь добиться результата, надо будет уточнить несколько моментов.

CurlyBrace Dec 21 2007 at 01:57

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

leMar Dec 21 2007 at 13:29

кроссбраузерно по пиксельно соединить два bg у меня получается только когда пишешь отдельные margin и padding для ослов. А я подобные манипуляции на дух не переношу.

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

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

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

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

Так что поздравляю, ты звизда! ))

CurlyBrace Dec 22 2007 at 00:53

Я всегда подключаю еще два файла стилей для ie6/7, так что еще пару строк не страшно.
А по поводу атаки, это ж не на меня, а на хостера ;)

4g3n7 Dec 21 2007 at 02:34

Из статьи полезно только начало.

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

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

Я сам вот все хочу написать про IE и проиллюстрировать на примере готового проекта, но карма(

UFO just landed and posted this here

4g3n7 Dec 21 2007 at 11:17

Не будем опускаться до оскорблений, в чем я не прав? Я знаю еще несколько случаев, когда при неправильном написании правило работает в ФФ и Опере, а в ИЕ не работает.

Dojd Dec 21 2007 at 14:36

Ну зачем же ВЫ так?
После перед фигурой скобкой пробел нужен и это видно по любому из примеро на w3с, не нужно углубляться в спецификацию (http://www.w3.org/TR/CSS21/about.html#sh…).
А насчет нытья - 4g3n7 ведь написал что хоxtn написать про IE и естесвенно во избежание нападков пояснил, почему еще не сделал этого.

pashka_r Jan 18 2008 at 02:15

то, что в примерах ставят пробел не означает, что он *обязателен*... смотрите грамматику http://www.w3.org/TR/CSS21/grammar.html

XXXVII Dec 21 2007 at 08:48

Спасибо=) Если доведется использовать - буду уже знать, что делать. Хотя возможно и не заметил бы, т. к. всегда ставлю пробелы.

Zacariya Dec 21 2007 at 11:34

Отлично, незнал такого...респект автору :)

zencd Dec 21 2007 at 12:57

рекомендую всем самостоятельно проверить тезис о необходимости пробела:

<style>

h1:first-letter{text-decoration:underline;}

</style>

<h1>hello</h1>

— работает в IE6

хотя я тоже поверил^:-), решил лишь посмотреть прокатит ли \t

zencd Dec 21 2007 at 13:01

( XP SP2 )

Dojd Dec 21 2007 at 14:55

Задумался и тоже проверил. Работает начиная с 5.5. Проверил в портативных версиях 3.0, 4.01, 5.01, 5.5, 6.0. Затем проверил в 6.0 со всеми автоапдейтами.
Может кто еще проверит или сможет прояснить чем ту подвох?

zencd Dec 22 2007 at 07:56

я на двух машинах проверил
пришла пора спросить «Автор, что у тебя за браузер?»

agel Dec 21 2007 at 17:04

может, потому, что всё в одну строку?
и ещё, попробуй баг с запятой.

zencd Dec 22 2007 at 07:52

одна строка — лишь для компактности
всё работает во всех позициях

UFO just landed and posted this here

shel_ol Apr 12 2008 at 21:36

Все очень просто!
Попробуй проставить доктайп - тогда не будет работать.

TillyTavretskaya Dec 21 2007 at 15:02

Срост! только как фоновые картинки будут между собой согласовываться, ну т.е. кто слоем выше будет, тот кто в цсс позже прописан? и еще а с еще одним псевдоклассом, например с :hover совмещать можно? было бы клево!

reflexing Dec 21 2007 at 16:47

Семантически неправильное использование псевдокласса - no way.

gryzzly Dec 21 2007 at 19:08

стили у нас предназначены для стилей, там искать семантику - это уже перебор, имхо. семантика - это относительно информации. а стиль в себе информацию не должен нести.

reflexing Dec 22 2007 at 02:11

Ну хорошо, если вы сами пишете CSS и вам нравится такой метод - пожалуйста. Но пожалейте других людей - такой код

CurlyBrace Dec 22 2007 at 02:19

А что такого в коде?

reflexing Dec 22 2007 at 03:02

Всё ОК. Думаю, иногда этот способ лучше, чем классический - div в div.

diamant Dec 23 2007 at 20:35

таким образом разработчики IE учат нас писать аккуратно и по правилам :)

Dimalex Sep 2 2009 at 18:55

Да, все работает, но если мы напишем .class1 .class2 h3:first-letter {...} даже с пробелом ИЕ6 откажется работать

CurlyBrace Sep 2 2009 at 23:34

Такие конструкции IE6 не понимает даже без :first-letter. Или я вас не совсем верно понял. Вы имеете в виду двойной класс?

Dimalex Sep 3 2009 at 08:43

Нет, не двойной класс, а просто последовательность вложенных элементов. Например div .myclass h3

CurlyBrace Sep 3 2009 at 09:12

Это очень подозрительно. У меня такая последовательность сработала без проблем

Dimalex Sep 3 2009 at 11:11

хм, буду пробовать. Просто h3:first-letter {...} (без иерархии) работает без проблем, а если задавать последовательность, то не работает

CurlyBrace Sep 3 2009 at 11:36

Проверьте иерархию и наследование стилей

kocten Sep 3 2009 at 12:05

спасибо за статью, помоему реально первый полезный для меня пост за несколько месяцев… уж очень много стало появляться на хабре всяких перепечаток и банальных методов, которыми мало кого удивишь =)