10 лучших CSS хаков для кроссбраузерности

« Предыдущая запись
 
  Следующая запись »
 

ie7 10 лучших CSS хаков для кроссбраузерностиВопросы кроссбраузерности будут ещё долго мучить умы веб-разработчиков, ровно до тех пор, пока не выпустит один браузер, которым будут пользоваться все без исключения (то есть - никогда - прим.ред.). Сейчас самым гагном является IE6, отчасти IE7, которые добавляют никого не обижающим верстальщикам кучу лишней работы. 

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

  1. Сброс настроек CSS. У всех браузров изначально включены какие-то стили CSS. Например, самый неудачный пример, который присущ большинству (если не всем) бразуеров, в котором прописаны дефолтовые margin 10px для тега боди, в результате чего помещённый вовнутрь конент оступает от края браузера, что рушит представление об изначальном виде дизайна. Самый яркий пример - сайт небезызвестного магазина "Intersport", а точнее его российского филиала - там до сих пор не знают, что margin можно обнулять.
    Обычно я использую следующую конструкцию для исправления мешающих параметров:
    * { margin: 0px; padding: 0px;}
    img { border: 0; }
    a, img, div, input  { outline: none; }
    ol, ul { list-style-position: inside; }
    В принципе этого хватает, чтобы достигнуть кроссбраузерности и корректного отображения сайта. Однако думаю всё таки стоит начать обнулять весь CSS. Может я слегка консервативен, поэтому этого не делаю до сих пор - зачем делать, если итак всё окей. Но может я чего-то и упускаю.
    Кардинально вопрос решился на сайте http://meyerweb.com - они предлагают следующий код:
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
       margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    /* remember to highlight inserts somehow! */
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
  2. Min-Height в IE. Internet Explorer 6 начисто не воспринимает CSS min-height, особенно тогда, когда оно так нужно. Исправляется дело таким вот образом:
    selector {
       min-height:300px;
       height:auto; !important
       height:300px;
    }
  3. Выделение ссылок пунктирной рамкой в браузерах. Зачастую мешает, портит вид и никому не нужно.
    Для нормальных браузеров (в т.ч. IE8) нужно выставить outline:none (читать тут), а для IE6 и IE7 надо использовать невалидный outline:expression(hideFocus='true'). Даже не смотря на то, что для IE6 и IE7 этого хака, как правило, не нужно (не припомню случая, когда он нормально с ссылками a работал), можно достигнуть валидности кода, назначив этот параметр через javascript или через какую-нибудь библиотеку. Например, для jQuery код следующий:
    $("a").attr("hideFocus", "true").css("outline", "none");
  4. Прозрачность. Иногда нужно блокам задавать прозрачность. Делается это просто, но, увы, невалидно:
    selector {
       filter:alpha(opacity=75);
       -moz-opacity:.75;
       opacity:.75;
    }
  5. Прозрачность PNG в IE6. Не забываем про существование конструкции:
    img, div {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(…);
    }
    Но поскольку она невалидна, да и при этом если задавать png в качестве бэкграунда, то его нельзя будет отпозиционировать и отрипитить. Посему рекумендуется к использованию IE PNG Fix (читать тут).
  6. Бикубический режим интерполяции для масштабируемых изображений. Звучит заумно, но ничего сложного нет. Помните в IE6 (и вроде бы в IE7 тоже) если размещаем картинку на странице и уменьшаем её размер, то она уменьшается через опу и выглядит как гагно? Так вот, есть способ это исправить (правда, увы, невалидный)
    img { -ms-interpolation-mode: bicubic; }
  7. Скроллинг в IE. По умолчанию в экслорерах (шестом точно, может седьмом) вертикальная полоса прокрутки в браузере отображена всегда, даже когда контента на странице вообще нет. Исправляется просто.
    html { overflow: auto; }
  8. Удваивание полей в IE. При наличии float:left и указанного маргина, маргин в ишачке удавивается. Лечение - display:inline (детальнее по ссылке).
  9. PRE и NOWRAP в CSS. Читаем в одноименной статье по ссылке.
  10. Псевдокласс :hover для IE. Поскольку ишак совсем тугой, то он ховер поддерживает только для тега a. Иногда этого хватает (так как a можно через display:block превратить по поведению в div), а иногда не хватает вообще. Решений на CSS для этого нет, но зато есть на jQuery. Создаём класс на цсс ( в нашем случае с именем classname), задам ему цвет, фон и прочее, ну, и добавляем для нужного элемента код (в нашем случае он для li'шек)
    $('ul li').hover(
       function () {
         $(this).addClass('classname'); },
       function() {
          $(this).removeClass('classname');
       }
    );

 

На сегодня всё. Посему до новых встреч, удачного завершения недели!

, , , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 10, средний: 4.50 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 17 на запись

"10 лучших CSS хаков для кроссбраузерности"

  1. Shift-Web.ru
    30/04/2010 at 23:18 Постоянная ссылка Цитировать

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
    }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    /* remember to highlight inserts somehow! */
    ins { text-decoration: none; }
    del { text-decoration: line-through; }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    Жесть! )))

  2. ага=) поэтому полным сбросом css я и не пользуюсь

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

  4. сбросовый css скинуть можно и в отдельный файл.. тогда не будет мусолить глаза…
    причем при верстке других сайтов можно просто копировать его и подгружать )

  5. ну да, обычно его отдельно и подрубают =)

  6. Сергей
    15/09/2011 at 13:09 Постоянная ссылка Цитировать

    Скажите пожалуйста, а почему бы не делать так:

    * { отменяем всё… }

    Зачем перечислять все тэги? Объясните пожалуйста :)

  7. потому что не всё и не у всех надо. маргин, падинг и оутлайн – можно у всех, а вот с остальным так делать – бред.

  8. Сергей
    15/09/2011 at 18:22 Постоянная ссылка Цитировать

    потому что не всё и не у всех надо. маргин, падинг и оутлайн – можно у всех, а вот с остальным так делать – бред.

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

    Например, если я сделаю так:
    * { list-style: none; }
    то для тэга img это свойство будет проигнорировано браузером.

  9. хм, тогда почему бы и нет. но в любом случае для border это не подойдёт, т.к. почти всегда есть элементы формы. конечно, если проект свой и там всё сделано без всяких вопросов, то тогда норм, но если это то, что потом уходит из твоих рук – то ты не будешь знать кто и как будет использовать твои разработки.

  10. Сергей
    15/09/2011 at 21:36 Постоянная ссылка Цитировать

    Символ * означает все тэги. Так вот меня всегда интересовало действительно ли “все” тэги или есть какие-то глюки в разных браузерах (например, какой-то тэг не реагирует на *)?

    Мне говорили, что в старых версиях FF не понимал, что такое * (правда меня интересуют лишь последние версии браузеров и хочу верстать кроссбраузерно только под новые версии)

    Например сделать так, чтобы кнопка кнопка не вдавливалась в браузере Opera так и не получилось :)

    Но частично решил эту проблему так:

    button { border: 1px solid grey; padding: 10px;}
    button:hover { background-color: lightgrey; }
    button:active { position: relative; left: -2px; margin-left: 2px; background-color: white; }

    Текст

    Правда нажимать на кнопку надо не более 1 раза в секунду. Если нажимать несколько раз в секунду, то всё-равно происходит вдавливание :) )))

    Александр, извините пожалуйста, за оффтоп. Но может Вы знаете, как можно сделать ссылку, вместо кнопки для отправки форм? Чтобы не использовать input или button (меня всегда злили эти элементы, так как не получалось сделать идеально кроссбраузерно)

    Есть что-то вроде $(“селектор”).submit(); но пока не хватило времени прочитать документацию.

  11. Сергей
    15/09/2011 at 21:40 Постоянная ссылка Цитировать

    Блин все html тэги обрезались :(

  12. я знаю, что там с * проблемы в старых ишаках, но меня как-то это не сильно беспокоит. главное чтобы в новых было адекватно, а то не знаешь никогда каких сюрпризов там ждать

    на тему вдавливания – о, дааа, тема бесячая.

    а отправить можно попробовать стандартным жабаскриптом
    <a href="#" onclick="document.form1.submit();">отправить</a>

    если через жкьюри, то надо задать ссылке идешник и, по идее, прописать нечто типа:

    $('#mylink').click(function(){
    $('#myform').submit();
    })

    но на тему работоспособности не ручаюсь, надо потестить

  13. Сергей
    15/09/2011 at 22:41 Постоянная ссылка Цитировать

    Спасибо большое за ответы. Буду пробовать :)

  14. незачт! если что – пишите =)

  15. Сергей
    28/10/2011 at 23:58 Постоянная ссылка Цитировать

    $(“a”).attr(“hideFocus”, “true”).css(“outline”, “none”);
    Уже отработает как each.

  16. кстати да. большое спасибо за дельный комент, исправил :)

  17. СерегаПростяк
    04/12/2012 at 9:50 Постоянная ссылка Цитировать

    если уж совсем не помогают, как и у меня есть самый простой и банальный способ
    если фон одноцветный. Вот:

    #img{color: #ffffff; padding-right: 0px;}
    #img:active{color: #ffffff; padding-right: 0px;}
    #img:visited{color: #ffffff; padding-right: 0px;}
    #img:hover{color: #ffffff; padding-right: 0px;}
    :)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии