Главная CSS-верстка

Зеленый свет CSS-свойствам при верстке под IE8 и выше

CSS Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще.

В связи с этим хочу составить список CSS-свойств, которые можно смело начать использовать без каких-либо «костылей» (и которых всегда так не хватало) при верстке под браузер Internet Explorer, начиная с 8-й версии и выше:

  1. box-sizing — это, пожалуй, самое вкусное. Наконец-то не нужно высчитывать ширину элемента при использовании бордеров и внутренних отступов. Благодаря этому свойству, они включаются в ширину. Т. е. ширина элемента = width + padding + border.

    Чтобы задать это свойство для всех элементов, необходимо в самое начало CSS-файла добавить следующий код:

    html {
    	box-sizing: border-box;
    }
    *,
    *:before,
    *:after {
    	box-sizing: inherit;
    }
    
  2. Псевдоселекторы :before :after. Случаев применения можешь быть огромное количество. Например, можно использовать их вместо пустых вложенных тегов. А живой пример виден прямо на этой странице — цифра перед каждым пунктом списка сделана с помощью :before.
  3. data: URI — возможность встраивать изображения в CSS без обращения к внешним файлам. Для небольших картинок размером в несколько килобайт — самое то, т.к. эта схема позволяет снизить количество запросов к серверу. Для больших же картинок использовать не стоит, т.к. размер закодированного изображения заметно больше оригинала, соответственно, CSS-файл может сильно увеличиться. Для преобразования изображений можно воспользоваться онлайн-конвертером.
  4. table, table-row и table-cell — значения CSS-свойства display, которые эмулируют таблицу. Данные стили позволяют отказаться от привычного многим свойства float при построении базовой сетки сайта.
  5. counter-reset и counter-increment — счетчики. Позволяют, например, вывести порядковые номера в нумерованном списке и придать им свое оформление, как это сделано в списке, который вы сейчас читаете. Подробнее об этих свойствах можно узнать здесь.
  6. inline-block — IE7 и ниже понимают это свойство только для строчных элементов. Для блочных же приходилось писать дополнительные стили. Теперь все будет проще.

Свойств получилось хоть и совсем немного, но они сильно упрощают жизнь верстальщику.

P. S. Как-то давно хотел составить аналогичный список для браузера IE7 при отказе от IE6, но упустил момент, и теперь это уже не актуально, т.к. IE6 канул в лету. Там бы этот список был значительно больше.

Комментарии (26)

  1. Без первого верстка форм в АД превращается, давно пора было! Ну, а кроме форм особо больше нигде и не нужно box-sizing, чтобы так * глобально объявлять)

    Вообщем поздравляю! :)

  2. Поддерживаю!
    Я тоже не так давно стал предлагать клиентам не поддерживать ИЕ7, чтобы сэкономить их же деньги)

  3. Чего-то ты поздновато решил отказаться. Я уже даже под IE8 особо не заморачиваюсь. Многие клиенты сами уже хотят нормальные современные сайты на css3 и html5. :-) Гул с 15 ноября также отказывается от поддержки ie8, так что останется только ie9 и ie10.

  4. Какие браузеры нуждаются в префиксе для бокс-сайзинг? Много у них пользователей? Может, ну их, эти префиксы?

  5. Я уже с полгода назад отказался.
    Если с клиентами хорошо поговорить и описать суть проблемы — то все соглашаются обойтись без ишаков. Так что здесь дело не в везении ;)
    По поводу приставок — тоже уже давно от всех отказался и моз и вебкит. Все равно потом задумаешься на тем, что бы их убрать.
    Зачем лишний геморрой на свою … :)

    • table, table-row и table-cell — значения CSS-свойства display, которые эмулируют таблицу. Данные стили позволяют отказаться от привычного многим свойства float при построении базовой сетки сайта.

      Ох не представляю, что меня заставит отказаться от обтекания :)
      Я к нему так привык, оно такое удобное — вряд ли откажусь :)

  6. Поздравляю! :)
    к сожалению, наши многие дяди до сих пор на ие сидят
    кстати, ие8 тоже со своими причудами бывает :)

  7. Не удержался, ребята, а как же graceful degradation или progressive enhancement? Или вы под «я отказался от этого браузера» понимаете именно это? Если так, то полностью согласен ;)

    Горяче советую посмотреть замечательный доклад о progressive enhancement умницы Владимира Агафонкина с «Yet another Conference 2012», ну и великолепный доклад Юрия Артюха «Когда хуже — лучше» с «РИТ 2011» о graceful degradation.

  8. Согласен с Евгением.
    Вполне достаточно того, что сайт не расползается по всем швам с ie7−8 + уведомление пользователя о говнобраузерности его браузера.

    Старые браузеры ie живут именно потому, что мы (разработчики) их поддерживаем.
    Как только мы перестанем поддерживать — они отомрут сами, потому что никому не хочется смотреть сайт в ущербном виде. Почему никто не верстает под ff3.6 и opera9 (и даже 10)? потому что есть более современные браузеры.
    А на ie7−8 сидят в госструктурах, потому что денег нет на лиц, а пиратки везде не поставишь, некоторые компы проверяют…

    У нас, к примеру, при составлении ТЗ менеджеры пишут IE9, а в регламенте по вёрстке прописано, что сайт не должен расползсться в ie8 (7 давно не поддерживаем, только за допплату). За последний год не было ни одного нового клиента с запросами ie7−8

  9. А как сделать так, чтобы пользователю отображалась страница, что у него устаревший браузер с предложением его обновить и пока не обновит на сайт не пускать :) подскажите, пожалуйста.

  10. Абсолютно согласен с тем, что давно пора отказываться и от IE7 и от IE8, так как процент их пользователей мизерный. Просто это веление времени. К тому же экономия средств и времени, что, в принципе, и является решающим фактором.

  11. подскажите IE-11 поддерживает Псевдоселекторы: before :after? Никак не получается отцентровать по вертикали картинки в рубриках в IE-11?