Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще.
В связи с этим хочу составить список CSS-свойств, которые можно смело начать использовать без каких-либо “костылей” (и которых всегда так не хватало) при верстке под браузер Internet Explorer, начиная с 8-й версии и выше:
-
box-sizing– это, пожалуй, самое вкусное. Наконец-то не нужно высчитывать ширину элемента при использовании бордеров и внутренних отступов. Благодаря этому свойству, они включаются в ширину. Т.е. ширина элемента =width+padding+border.Чтобы задать это свойство для всех элементов, необходимо в самое начало CSS-файла добавить следующий код:
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } - Псевдоселекторы
:before:after. Случаев применения можешь быть огромное количество. Например, можно использовать их вместо пустых вложенных тегов. А живой пример виден прямо на этой странице – цифра перед каждым пунктом списка сделана с помощью:before. data: URI– возможность встраивать изображения в CSS без обращения к внешним файлам. Для небольших картинок размером в несколько килобайт – самое то, т.к. эта схема позволяет снизить количество запросов к серверу. Для больших же картинок использовать не стоит, т.к. размер закодированного изображения заметно больше оригинала, соответственно, CSS-файл может сильно увеличиться. Для преобразования изображений можно воспользоваться онлайн-конвертером.table,table-rowиtable-cell– значения CSS-свойстваdisplay, которые эмулируют таблицу. Данные стили позволяют отказаться от привычного многим свойстваfloatпри построении базовой сетки сайта.counter-resetиcounter-increment– счетчики. Позволяют, например, вывести порядковые номера в нумерованном списке и придать им свое оформление, как это сделано в списке, который вы сейчас читаете. Подробнее об этих свойствах можно узнать здесь.inline-block– IE7 и ниже понимают это свойство только для строчных элементов. Для блочных же приходилось писать дополнительные стили. Теперь все будет проще.
Свойств получилось хоть и совсем немного, но они сильно упрощают жизнь верстальщику.
P.S. Как-то давно хотел составить аналогичный список для браузера IE7 при отказе от IE6, но упустил момент, и теперь это уже не актуально, т.к. IE6 канул в лету. Там бы этот список был значительно больше.
Смотрите также
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
CSS-трюк: IE, таблица и "резиновые" изображения
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об ...
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
"Резиновая" ширина колонок + эмуляция высоты
Крайне редко мне доводится верстать полностью резиновые макеты, т.е. когда требуется “резиновая” ширина не только для самой страницы, но и для всех колонок (как правило, боковые колонки на моей практике ...
Комментарии (26)
Без первого верстка форм в АД превращается, давно пора было! Ну а кроме форм особо больше нигде и не нужно box-sizing, чтобы так * глобально объявлять )
Вообщем поздравляю! :)
Я буду box-sizing использовать не только для форм.
А box-sizing так же распространяется на div и другие блочные элементы?
Если использовать селектор, как указано в статье, то да. Но так лучше не делать.
А что в этом плохого?
Уже не помню, в чем была проблема, но я решил применять это свойство только для конкретных элементов, когда возникает необходимость.
Поддерживаю!
Я тоже не так давно стал предлагать клиентам не поддерживать ИЕ7, чтобы сэкономить их же деньги )
Чего-то ты поздновато решил отказаться. Я уже даже под IE8 особо не заморачиваюсь. Многие клиенты сами уже хотят нормальные современные сайты на css3 и html5. :-) Гул с 15 ноября также отказывается от поддержки ie8, так что останется только ie9 и ie10.
Возможно. У меня ситуация немного другая. Некоторым клиентам нужна была поддержка IE7, поэтому я для всех верстал с учетом его.
Мне такие редко попадаются, к сожалению =(
Про IE8 еще рано забывать, думаю, даже после выхода IE10. Ли.ру за сентябрь показывает долю IE8 – 4.8%. Не мало.
На самом деле мне тоже такие стали всё чаще встречаться, просят – лишь бы на ие7-8 хоть как-нибудь работало.
Везет вам =)
Реально, где Вы их берете? у меня как минимум чтобы в ие7 было бы как в макете, хоть убейся(
Какие браузеры нуждаются в префиксе для бокс-сайзинг? Много у них пользователей? Может, ну их, эти префиксы?
По большому счету
-webkit-можно откинуть, т.к. он нужен только для старых версий мобильных браузеров от Apple и Google. Но-moz-в любом случае нельзя убирать.Посмотреть можно тут – http://caniuse.com/#search=box-sizing
Я уже с полгода назад отказался.
Если с клиентами хорошо поговорить и описать суть проблемы – то все соглашаются обойтись без ишаков. Так что здесь дело не в везении ;)
По поводу приставок – тоже уже давно от всех отказался и моз и вебкит. Все равно потом задумаешься на тем, что бы их убрать.
Зачем лишний геморрой на свою … :)
Ох не представляю, что меня заставит отказаться от обтекания :)
Я к нему так привык, оно такое удобное – вряд ли откажусь :)
Поздравляю! :)
к сожалению, наши многие дяди до сих пор на ие сидят
кстати, ие8 тоже со своими причудами бывает :)
Не удержался, ребята, а как же graceful degradation или progressive enhancement? Или вы под «я отказался от этого браузера» понимаете именно это? Если так, то полностью согласен ;)
Горяче советую посмотреть замечательный доклад о progressive enhancement умницы Владимира Агафонкина с «Yet another Conference 2012», ну и великолепный доклад Юрия Артюха «Когда хуже — лучше» с «РИТ 2011» о graceful degradation.
Лично я это и имел в виду.
Согласен с Евгением.
Вполне достаточно того, что сайт не расползается по всем швам с ie7-8 + уведомление пользователя о говнобраузерности его браузера.
Старые браузеры ie живут именно потому, что мы (разработчики) их поддерживаем.
Как только мы перестанем поддерживать – они отомрут сами, потому что никому не хочется смотреть сайт в ущербном виде. Почему никто не верстает под ff3.6 и opera9 (и даже 10)? потому что есть более современные браузеры.
А на ie7-8 сидят в госструктурах, потому что денег нет на лиц, а пиратки везде не поставишь, некоторые компы проверяют…
У нас, к примеру, при составлении ТЗ менеджеры пишут IE9, а в регламенте по вёрстке прописано, что сайт не должен расползсться в ie8 (7 давно не поддерживаем, только за допплату). За последний год не было ни одного нового клиента с запросами ie7-8
А как сделать так, чтобы пользователю отображалась страница, что у него устаревший браузер с предложением его обновить и пока не обновит на сайт не пускать :) подскажите, пожалуйста.
В Интернете полно решений. Нужно искать.
Это самое что ни на есть издевательство над пользователем. Достаточно уведомления не мешающего получить доступ к информации.
Абсолютно согласен с тем, что давно пора отказываться и от IE7 и от IE8, так как процент их пользователей мизерный. Просто это веление времени. К тому же экономия средств и времени, что, в принципе, и является решающим фактором.
подскажите IE-11 поддерживает Псевдоселекторы ::before ::after ? Никак не получается отцентровать по вертикали картинки в рубриках в IE-11?
Поддерживает. А что, по-вашему, если IE8 поддерживает, то более поздняя версия может не поддерживать?