• Техногрет
  • Учим IE хорошему

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    22 ноября 2005


    Для просмотра этого примера необходим IE.

    Задача.

    Сделать «прозрачным» написание CSS- и HTML-кода для IE под Windows версии 5.0 и выше.

    Это не окончательный код. Скрипт будет изменяться и дополняться.

    Как это выглядит в браузере

    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    43 
    44 
    45 
    46 
    47 
    48 
    49 
    50 
    51 
    52 
    53 
    54 
    55 
    56 
    57 
    58 
    59 
    60 
    61 
    62 
    63 
    64 
    65 
    66 
    67 
    68 
    69 
    70 
    71 
    72 
    73 
    74 
    75 
    76 
    77 
    78 
    79 
    80 
    81 
    82 
    83 
    84 
    85 
    86 
    87 
    88 
    89 
    90 
    91 
    92 
    93 
    94 
    95 
    96 
    97 
    
        <head>
            <title></title>
            <style type="text/css">
                /*
                    не забудьте особенность конструкции
                    behavior: url(...)
                    путь должен быть абсолютным
                */
                body
                {
                    background: white;
                    color: black;
                    behavior: url('../../etc/reformator/i/vlalek.htc');
                }
                .png
                {
                    //background-image: none ! important;
                    behavior: url('../../etc/reformator/i/vlalek.htc');
                }
    
                h1:hover, a:hover { color: red ! important; }
                h1:hover code { color: blue; }
                h1 code:hover { color: green; }
                p b:first-child,
                p b.first-child /* для IE */
                { color: green; }
                p:after,
                p.after
                { content: '.'; }
                p#paragraph:before,
                p#paragraph.before
                {
                    content: '\2014\a0'; /* такой формат строки не работает в IE 5.x */
                    //content: '&mdash;&nbsp;'; /* а такой в FireFox */
                }
    
                /* такие конструкции используйте осторожно,
                в некоторых случаях, можно серьезно подвесить Windows */
                b:first-child+b+b { color: red; } /* пробелы вокруг + лучше не ставить из-за IE 5.0 */
                /* замена + на plus для IE, через запятую с предыдущим нельзя писать */
                b.first-child plus b plus b { color: red; }
    
                form { float: left; padding: 0.25em; }
                form + p { clear: left; }
                form plus p { clear: left; }
    
                p:hover+form { background: yellow; }
                p:hover plus form { background: yellow; }
    
                input { border-width: 2px; }
                input:active,
                input:focus,
                input.focus
                { border-color: green; border-style: solid; }
                input:active { border-color: red; }
            </style>
        </head>
        <body>
            <h1>Заголовок с&nbsp;псевдоклассом <code>:hover</code></h1>
            <p>#" onclick="return false;">Псевдокласс ссылки</a>
                остается без изменения, а&nbsp;у&nbsp;параграфов используется
                псевдокласс <code>:after</code>, расставляющий точки в&nbsp;конце</p>
            <p id="paragraph"><b>Начальный &laquo;полужирный&raquo; элемент</b>,
                <b>следующий элемент</b>, а&nbsp;<b>третий</b>&nbsp;&mdash; будет
                красным. И&nbsp;у&nbsp;этого параграфа&nbsp;&mdash; псевдокласс
                <code>:before</code>, добавляющий тире перед текстом</p>
            <p>А&nbsp;это кнопка с&nbsp;псевдоклассами <code>:focus</code>
                и&nbsp;<code>:active</code>.  И&nbsp;если навести курсор на&nbsp;этот
                параграф подсветится форма</p>
            <form onsubmit="return false;">
                <input
                    type="button"
                    value="Добавить новый начальный элемент в предыдущий параграф"
                    onclick="Insert_first_child()"
                />
            </form>
            <p>Картинка с&nbsp;классом ../png_in_ie/" target="_top">png</a></p>
            <img
                src="../png_in_ie/logo.gif"
                style="background-image: url('../png_in_ie/logo.png');"
                class="png"
                width="175"
                height="135"
                alt="Knorr &reg;"
            />
            <script type="text/javascript">
                var eP = document.getElementById( 'paragraph' );
                function Insert_first_child(){
                    var eB = document.createElement('b');
                    eB.innerHTML = 'Новый, ';
                    eP.insertBefore( eB, eP.firstChild );
                    eP.className += ' '; /* для Firefox */
                }
            </script>
        </body>
    </html>