<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl"  href="/xslt/final.xslt"?><html>
  <head>
    <title>Бреем Оперу: сброс скинов Select/Input в Opera</title>
    <meta name="css" content=""/>
    <meta name="js" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="id" content="27"/>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
  </head>
  <body>
    <div class="main">
      <div class="wrap">
        <div class="L">
          <h1><a href="/">..</a> / Бреем Оперу: сброс скинов Select/Input в Opera</h1>
          <ol class="tags big">
            <li>
              <a href="/css">css</a>
            </li>
          </ol>
          <div class="myContent"><p>В Opera внешний вид контролов традиционно, отличается от внешнего вида в нормальных броузерах. Выглядят они красивее чем системные, но радости с этого мало. Иногда это вызывает лишние вопросы.  Чтобы лишних вопросов избежать нужно добавить в стиль background:white.  Очень хорошо помогает привести все к более-менее единобразному виду.</p>
<p><img height="221" width="454" alt="" src="/img/articles/opera.gif"/></p>
<p>Побочый эффект - В MSIE6 из-за этого у checkbox появляется артефакт. Поэтому для Оперы нужно делать отдельный стиль.</p>

<table class="code">
    <tbody>
        <tr>
            <td><!--php-->
            <pre class="brush: plain">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 
            {
                head~body input { background:white; }
            }</pre><!--/php--></td>
        </tr>
    </tbody>
</table>
<p>ЗЫ. Код подсмотрен здесь: <a href="#" title="css-framework.ru/additional/css-hack/" rel="nofollow" class="external">http://css-framework.ru/additional/css-hack/</a></p>
<p>Впрочем это не снимает вопрос, когда заказчику подсовывают дизайн форм сляпаный под Safari или Google Chrom. Объяснить чем чревато использование "красивых" контролов в стиле <a href="#" title="www.emblematiq.com/projects/niceforms/" rel="nofollow" class="external">NiceForm</a> обычно требует много времени и нервов.</p>
<p> </p></div>
          <ol class="tags big">
            <li class="date">2008-11-24</li>
            <li>
              <a href="/css">css</a>
            </li>
          </ol>
          <ol class="see">
            <li>
              <a href="#"><span>blog.hedgerwow.com/2007/06/22/detect-safari-3-via-css/#comment-147</span> - <b>Хаки Оперы и Сафари</b></a>
            </li>
            <li>
              <a href="#"><span>dimox.name/personal_css_hacks_for_opera_firefox_ie/</span> - <b>Подборка хаков для разных броузеров</b></a>
            </li>
            <li>
              <a href="#"><span>css-framework.ru/additional/css-hack/</span> - <b>И еще одна подборка хаков на сайте css-framework.RU</b></a>
            </li>
            <li>
              <a href="#"><span>habrahabr.ru/blogs/css/43318/</span> - <b>Еще одна подборка хаков</b></a>
            </li>
          </ol>
          <ul class="comment">
            <li id="a178" title="a0">
              <a name="Le capitaine Nemo" title="" rel="24.11.08"/>
              <div>Зачем это надо? Пользователь привык к контролам оперы, а вы ему подсовываете невесть что.</div>
            </li>
            <li id="a179" title="a178">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="24.11.08"/>
              <div>Мне два раза в году попадается менеджер требующий чтобы во всех броузерах все выглядело одинаково. Они об этом в книжках где-то читали.<br/>Иногда проще выполнить подобные требования, чем убедить в их ненужности, и я бы сказал, вредности.</div>
            </li>
            <li id="a181" title="a0">
              <a name="Yta" title="" rel="27.11.08"/>
              <div>Присоединяюсь к Капитану Немо. <br/>Зачем? И потом все равно не получится. Сафари с хромым все равно свои контролы подставят:)<br/>Я думаю вы неправильно делаете. Нужно заказчику объяснить что контролы должны быть дефолтными и никакими другими.</div>
            </li>
            <li id="a182" title="a181">
              <a name="&#x418;.&#x422;&#x44B;&#x43D;" title="" rel="29.11.08"/>
              <div>Может вам с клиентами везло, а может не достало еще. Иногда проще сговнякать чем объяснить что говно No Passaran.</div>
            </li>
            <li id="a183" title="a0">
              <a name="develop" title="" rel="29.11.08"/>
              <div>Исаак, вы грязный извращенец. Оставьте опере оперово</div>
            </li>
            <li id="a184" title="a183">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="29.11.08"/>
              <div>Ну типа, работая в борделе, невинность соблюсти сложно. А долбанная опера - это самый извращенный клиент в борделе броузеров. Имхо конечно. <br/>Жил бы не в России, забил бы к чертовой матери. А так приходится подстраиваться.</div>
            </li>
            <li id="a185" title="a184">
              <a name="develop" title="" rel="04.12.08"/>
              <div>Нормальный броузер. Чего он вам не нравится?</div>
            </li>
            <li id="a186" title="a185">
              <a name="&#x418;&#x441;&#x430;&#x430;&#x43A; &#x422;&#x44B;&#x43D;&#x433;&#x44B;&#x43B;&#x447;&#x430;&#x432;" title="erum.ru" rel="04.12.08"/>
              <div>Ну нормальным он стал с версии 9.5 да и то с натяжкой. А я с ним бодаюсь с намного более ранних версий. Хотя сейчас проблем конечно меньше.<br/>Но даже в последних версиях возникают проблемы с JS. То глючит на JQuery то на Prototype. Глючит с FCKEditor и пр. В новых версиях исчезают старые глюки, но появляются новые.</div>
            </li>
            <li id="a214" title="a178">
              <a name="Le capitaine Nemo" title="" rel="04.01.09"/>
              <div>А помоему все правильно. Непонятно зачем вообще делать разные инпуцты в разных броузерах. Дизайн должен быть одинаковым во всех броузерах - это главное требование всегда. Почему тогда должны быть исключения?</div>
            </li>
            <li id="a240" title="a181">
              <a name="DiS" title="www.dis.dj" rel="12.02.09"/>
              <div>Вы глубоко заблуждаетесь… В Webkit-based браузерах есть куча -webkit- CSS свойств для управления видом контролов. Например — -webkit-appearance: none, это снимает все стандартные стили и можно задать любые свои. Дизайн кнопки для выпадающего списка можно задать CSS спрайтом, например, а стили границ стандартно через border.</div>
            </li>
            <li id="a273" title="a240">
              <a name="Yta" title="" rel="29.04.09"/>
              <div>хорошо. можно задать но ведь это не решает два вопроса. Вопрос кроссброузерности. Типа чо если через год  появится еще один броузер/ Например MS сменит платформу. Будете все переверстывать? <br/>Второй вопрос - пользователю будет уютно от контролов, к которым он не привык?</div>
            </li>
            <li id="a282" title="a214">
              <a name="yrik" title="" rel="13.05.09"/>
              <div>В вебе своя специфика. Дефолтные установки броузера всегда предпочтительнее.</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="R">
        <a href="/" title="&#x41D;&#x430; &#x433;&#x43B;&#x430;&#x432;&#x43D;&#x443;&#x44E;"/>
      </div>
    </div>
    <div id="li"/>
  </body>
</html>

