Pull to refresh

Comments 105

Коротко и ясно! Честно избегал псевдоклассов в ие. Теперь один стоит взять на заметку!
Интересненько. Надо будет посмотреть поближе…
спасиба, недавно ломал голову, пытаясь понять почему мои стили не работали в ие... оказалось все так просто, что хочется кого-то ударить...
Вот за это ie я особенно люблю.
...коробку с дистрибутивом Окон =D
сам давно и успешно использовал :first-letter, но вот про такие хитрости с пробелами... и ЭТО не исправили! позор Microsoft.
да. я уже посмотрел. но прошло что-то около шести лет, если мне не изменяет память...
Ну тут с вами только глупец поспорит ))
ну на самом деле если помните в IE6 даже в процессе исправлений возникали ещё более курьезные баги :) а так как немногие пользовались этим псевдоклассом, то и важность бага сошла на нет :)
гениально! спасибо, должно заметно облегчить жизнь :)
Класс!!! Я всегда был уверен что двойные бэкграунды в css невозможны.
Автор, спасибо тебе! Большое человеческое!

Пошел гуглить по псевдоклассам...
UFO just landed and posted this here
Прям Каскадные Таблицы Сисек...
UFO just landed and posted this here
Вот оно! Отсутствие внимания со стороны противоположного пола
Спасибо! Обязательно возьму на заметку... Видимо я один, кто этот Псевдокласс использовал реально для стилизации первой буквы абзаца.. :)
Большое спасибо, действительно очень полезно. IE в своем репертуаре...
UFO just landed and posted this here
Теперь придется еще и запятые от слов отделять. На всякий случай. :)
Не ожидал, что стиль, по сути предназначенный для буквицы, может быть использован таким вот образом, да еще и в IE 6 работает.

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

а почему center а не middle? Вроде же по горизонтали left, center, right, по вертикали - top, middle, bottom.
Будем считать недокументированной функцией =)
Да и путаницы при кратком написании 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.
Хм, похоже ваша правда. Простите.
Ничего страшного. Я просто часто с этими параметрами работаю. Я не доверяю своей памяти, поэтом проверяю. Но доверяю своим глазам :)
В том-то и дело, что я тоже буквально позавчера перепутал эти параметры местами, и уже в который раз попытался запомнить правильный порядок :)
И опять не получилось :))
А я когда последний раз перепутал, как раз и запомнил правильно :) Запоминается легко. Всё всегда начинается с ширины, потом высота. Что картинки, что координаты - XY. Поэтому первым идёт X - слева-направо, сверху-вниз :)
UFO just landed and posted this here
top и left просто ключевые слова, которые UA толкует однозначно, в каком бы порядке вы их ни написали. Но порядок в дому нужОн!
есть замечательные псевдоклассы :before и :after и замечательнейшая вещь content:

h1:before{
content: "*"
};

:-)
если что, в content вставлять картинки тоже :)
h1: before{
content: url('img.gif');
};
А в шестом осле это работает?
нет его под рукой проверить
Насколько я помню, и близко не работает. Тож лень проверять :)
Абсолютно точно не работает.
Не работает во всех IE. Недавно буквально искал. Причем не нашел даже хаков.
.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-атакой.

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

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

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

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

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

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

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

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


работает в IE6

хотя я тоже поверил:-), решил лишь посмотреть прокатит ли \t
Задумался и тоже проверил. Работает начиная с 5.5. Проверил в портативных версиях 3.0, 4.01, 5.01, 5.5, 6.0. Затем проверил в 6.0 со всеми автоапдейтами.
Может кто еще проверит или сможет прояснить чем ту подвох?
я на двух машинах проверил
пришла пора спросить «Автор, что у тебя за браузер?»
может, потому, что всё в одну строку?
и ещё, попробуй баг с запятой.
одна строка — лишь для компактности
всё работает во всех позициях
UFO just landed and posted this here
Все очень просто!
Попробуй проставить доктайп - тогда не будет работать.
Срост! только как фоновые картинки будут между собой согласовываться, ну т.е. кто слоем выше будет, тот кто в цсс позже прописан? и еще а с еще одним псевдоклассом, например с :hover совмещать можно? было бы клево!
Семантически неправильное использование псевдокласса - no way.
стили у нас предназначены для стилей, там искать семантику - это уже перебор, имхо. семантика - это относительно информации. а стиль в себе информацию не должен нести.
Ну хорошо, если вы сами пишете CSS и вам нравится такой метод - пожалуйста. Но пожалейте других людей - такой код
Всё ОК. Думаю, иногда этот способ лучше, чем классический - div в div.
таким образом разработчики IE учат нас писать аккуратно и по правилам :)
Да, все работает, но если мы напишем .class1 .class2 h3:first-letter {...} даже с пробелом ИЕ6 откажется работать
Такие конструкции IE6 не понимает даже без :first-letter. Или я вас не совсем верно понял. Вы имеете в виду двойной класс?
Нет, не двойной класс, а просто последовательность вложенных элементов. Например div .myclass h3
Это очень подозрительно. У меня такая последовательность сработала без проблем
хм, буду пробовать. Просто h3:first-letter {...} (без иерархии) работает без проблем, а если задавать последовательность, то не работает
Проверьте иерархию и наследование стилей
спасибо за статью, помоему реально первый полезный для меня пост за несколько месяцев… уж очень много стало появляться на хабре всяких перепечаток и банальных методов, которыми мало кого удивишь =)
Sign up to leave a comment.

Articles