NoMoreCSSHacks - 徒委記

Introduction
CSS Hacks
Why Hacks are Ugly
The Other Way
Let's Get Going
Final Example

No More CSS Hacks | Articles | Stylegala (Internet Archive)の参照訳。ほとんどExcite翻訳を使用しています。

Introduction

If you are a web designer or front-end developer, you are probably familiar with how different browsers or user agents displays your code in their own way. Picture this: You are pushing pixels and refining your designs so it fits perfect in your Firefox browser, but when presenting your design to the client in Internet Explorer, your pages might brake completely. Bye bye contract. Designing with CSS is no exception. On the contrary - table based layout seems to be more cross-browser consistent than CSS positioning. This probably one of the reasons why several big names still uses tables in their web design layouts.

ウェブデザイナーかフロントエンド開発者であるなら、あなたはたぶん異なったブラウザかユーザエージェントがどうそれなりにあなたのコードを表示するかに詳しいです。これについて描写してください: あなたは押す画素です、そして、あなたのファイヤーフォックスブラウザで完全な状態で合いますが、インターネット・エクスプローラーのクライアントにあなたのデザインを提示するとき、あなたのデザインを洗練して、あなたのページは完全にブレーキをかけるかもしれません。バイバイ、契約してください。 CSSとの設計は例外ではありません。これに反して、--テーブルのベースのレイアウトはCSS位置決めよりさらに多くの交差しているブラウザ一貫しているように思えます。これほどたぶん、数回の著名人がまだ使用している理由の1つはそれらのウェブでデザインレイアウトを見送ります。

CSS Hacks

To compensate these browser glitches, many CSS designers have been working on setting up CSS hacks. A CSS hack is a way to force some user agents to ignore a certain CSS property by putting faux code into the CSS file. One of the most infamous issues when designing with CSS is the Box model. IE5/Windows and IE5.5/Windows misinterpret the CSS1 box model by placing border and padding inside the specified width instead of outside. Here is an example of one of the most common CSS hacks used to solve this:

これらのブラウザ不調を代償するために、多くのCSSデザイナーがCSSハッキングをセットアップするのに働いています。 CSSハッキングは何人かのユーザエージェントにCSSファイルに偽のコードを入れることによって、あるCSSの特性を無視させる方法です。 CSSと共に設計するとき、最も悪名高い問題の1つはBoxモデルです。 IE5/WindowsとIE5.5/Windowsは、外部の代わりに指定された幅の中で境界を置いて、そっと歩くことによって、CSS1ボックス・モデルを誤解します。ここに、これを解決するのに使用される中で最も一般的なCSSハッキングのひとりの例があります:

.content
    {
    width: 700px;
    padding: 0 100px;
    voice-family: "\"}"";
    voice-family: inherit;
    width: 500px;
    }

So what does this mean? The first rule width: 700px; will apply to all user agents. But there is a second style rule, which takes advantage of a CSS parsing bug in IE5/Windows and IE5.5/Windows, to apply a width which is then overriden. So IE5/Windows and IE5.5/Windows will read width: 700px and all other browsers will read width: 500px. So far so good. Except that everyone will see your hack.

したがって、これは何を意味しますか? 最初の規則幅: 700px; すべてのユーザエージェントに適用するでしょう。しかし、2番目のスタイル規則があります。(それは、次にoverridenな幅を適用するのにIE5/WindowsとIE5.5/WindowsでCSS構文解析バグを利用します)。したがって、IE5/WindowsとIE5.5/Windowsは幅を読むでしょう: 700pxと他のすべてのブラウザが幅を読むでしょう: 500px。したがって、はるかにとても良いです。皆があなたのハッキングに会うのを除いて。

Why Hacks are Ugly

There is something fundamentally wrong with how hacks work. They are based on producing errors in the CSS code to exploit browser flaws that prevents them from parsing certain CSS properties and values. Most CSS hacks works fine enough, but looks really bad and a hack like the one above does not validate using the W3C validator. If you are interested in semantics and standards you would never put a similar hack in an XHTML file, so why would you do it in the CSS file?

ハッキングがどう働いているかに基本的にある何か問題があります。それらはCSSコードにおける誤りを功績ブラウザ欠点に起こすのに彼らが、あるCSSの特性と値を分析するのを防ぐ基づいています。ほとんどのCSSが、十分すばらしい作品をハックしますが、上が有効にしないもののようにW3C validatorを使用することで本当に悪い、そして、aハッキングに見えます。したがって、あなたが意味論に興味を持っていて、あなたが決してそうしない規格がXHTMLファイルに同様のハッキングを入れるなら、あなたはなぜCSSファイルの中でそれをするでしょうか?

The Other Way

What if we could detect browsers and serve different CSS rules to different user agents, without using hacks or conditional comments? What if the end user or validator never saw the CSS rules specified for other browsers than the one they are using? We can. Many server side languages can detect browsers just as good as any CSS hack, and in this example we will use some simple PHP magic to make things happen.

私たちがハッキングか条件付きのコメントを使用しないで異なったユーザエージェントにブラウザを検出して、異なったCSS規則をサービスすることができると、どうなるでしょうか? エンドユーザかvalidatorが、CSS規則が彼らが使用しているもの以外のブラウザに指定されるのを決して見なかったなら、どうなるでしょうか? 私たちはそうすることができます。多くのサーバサイド言語がどんなCSSもハックして、私たちがものを起こらせるのにこの例で何らかの簡単なPHPマジックを使用するつもりであるのとちょうど同じくらい良い状態でブラウザを検出することができます。

Let's Get Going

To be able to use PHP in a CSS file, we need to link up the php file in the XHTML header as CSS and then send the correct header in the php file. As we don't need the @import hack anymore, put this line in the header of your XHTML file:

CSSファイルの中でPHPを使用することができるように、私たちは、CSSとしてXHTMLヘッダーでphpファイルをリンクして、次に、phpファイルの中で正しいヘッダーを送る必要があります。私たちがそれ以上@importハッキングを必要としないので、あなたのXHTMLファイルのヘッダーにこの系列を入れてください:

Create a new file called "styles.php" and save it into the same directory as your XHTML file. The first line in this file will be a header command to define a text/CSS header to the document. Once this is done, we can start producing variables in PHP and use them to print different rules in the CSS file depending on user agent. Let's create a small application that detects browser types and versions and platform, and then put these values in variables for later use:

あなたのXHTMLがファイルするように、"styles.php"と呼ばれる新しいファイルを作成してください、そして、同じディレクトリにそれを保存してください。このファイルにおける最初の系列は、テキスト/CSSヘッダーをドキュメントと定義するためにヘッダーコマンドになるでしょう。いったんこれをすると、私たちは、PHPの変数を生産し始めて、ユーザエージェントに頼っていて、CSSファイルの中で異なった規則を印刷するのにそれらを使用することができます。ブラウザタイプ、バージョン、およびプラットホームを検出する小さいアプリケーションを作成して、次に、後の使用のために変数にこれらの値を入れましょう:

<?php
header("Content-type: text/css");
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
function detect()
    {
    $browser = array ("IE","OPERA","MOZILLA","NETSCAPE","FIREFOX","SAFARI");
    $os = array ("WIN","MAC");
    $info['browser'] = "OTHER";
    $info['os'] = "OTHER";
    foreach ($browser as $parent)
        {
        $s = stripos($_SERVER['HTTP_USER_AGENT'], $parent);
        $f = $s + strlen($parent);
        $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
        $version = preg_replace('/[^0-9,.]/','',$version);
        if ($s)
            {
            $info['browser'] = $parent;
            $info['version'] = $version;
            }
        }
    foreach ($os as $val)
        {
        if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
        }
    return $info;
    }

Let's use these variables to print out user agent specific values, taking the box-model hack as an example. We will use simple if/else statements to check our variables, but you could also use ternary operators. What we are doing here is basically: if platform is windows and browser is IE and version is less than 6, width is 700px, else width is 500px.

例としてボックス・モデルハッキングをみなして、ユーザのエージェントの特定の値を印刷するのにこれらの変数を使用しましょう。私たちは私たちの変数をチェックする/ほかの声明であるなら簡単な状態で使用するつもりですが、また、あなたは三つ組のオペレータを使用することができました。私たちがここにしていることは基本的に以下の通りです。プラットホームが窓であり、ブラウザがIEであり、バージョンが6未満であるなら、幅が700pxである、幅はほかの500pxです。

.content
    {
    padding: 0 100px;
    width: <?php
    if ($o == "WIN" && $b == "IE" && $v < 6) echo "700px;"
    else echo "500px;";
    ?>
    }

There are no limits to how useful a script like this can be for the advanced CSS designer. In the rule above, IE5/win and IE5.5/win will see width: 700px; and all other browsers will see width: 500px;. Without hacks and invalid CSS markup You can even skip the popular @import hack to prevent browser versions below 5 to display the CSS. Another useful example would be to serve .gif instead of .png to IE5/win & IE5.5/win if you are using alpha transparency as background:

このようなスクリプトがどれくらい上級のCSSデザイナーの役に立つ場合があるかへの限界が全くありません。規則で、上では、IE5/勝利とIE5.5/勝利が幅を見るでしょう: 700px; そして、他のすべてのブラウザが幅を見るでしょう: 500px; ハッキングと無効のCSSマーク付けがなければ、あなたは、CSSを表示するために5より下でブラウザバージョンを防ぐためにポピュラーな@importハッキングをスキップすることさえできます。別の役に立つ例はあなたがバックグラウンドとしてアルファ透明を使用しているならIE5/勝利とIE5.5/勝利への.pngの代わりに.gifに役立つだろうことです:

body
    {
    background: url(<?php
    if ($o == "WIN" && $b == "IE" && $v < 6) echo "background.gif";
    else echo "background.png";
    ?>);
    }

Here is another scenario: You want to apply max-width, but just found out that IE doesn't support it. So you found out about a max-width hack, but don't like to put ugly javascript expressions in your CSS. Here's how to serve the javascript to IE only:

ここに、別のシナリオはあります: 最大幅を適用したがっていますが、IEがそれを支持しないのをちょっと調べてください。したがって、あなたは、最大幅のハッキングを見つけますが、あなたのCSSに醜いjavascript表現を入れるのが好きではありません。ここに、どうIEだけにjavascriptに役立つかがあります:

body
    {
    <?php
    if ($b == "IE") echo "width:expression(document.body.clientWidth > 800? \"800px\": \"auto\" );";
    else echo "max-width: 800px;";
    ?>
    }

Final Example

The sample PHP/CSS file in this example will hide certain selectors and only show the selector that contains the correct browser information. At the same time we will get rid of the @import hack and serve no CSS to user agents that doesn't support it properly. You can watch what the html file looks like at our Demo page. Don't forget that you can download all associated files to this article here.

この例のサンプルPHP/CSSファイルは、あるセレクタを隠して、正しいブラウザ情報を含むセレクタを示すだけでしょう。同時に、私たちは、@importハッキングを取り除いて、ユーザエージェントへの適切にそれを支持しないCSSに全く役立たないでしょう。あなたはhtmlファイルが私たちのDemoページで似ているものを見ることができます。ここですべての関連ファイルをこの記事にダウンロードすることができるのを忘れないでください。

<?php
header("Content-type: text/css");
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
function detect()
    {
    $browser = array ("IE","OPERA","MOZILLA","NETSCAPE","FIREFOX","SAFARI");
    $os = array ("WIN","MAC","LINUX");
    $info['browser'] = "OTHER";
    $info['os'] = "OTHER";
    foreach ($browser as $parent)
        {
        $s = stripos($_SERVER['HTTP_USER_AGENT'], $parent);
        $f = $s + strlen($parent);
        $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
        $version = preg_replace('/[^0-9,.]/','',$version);
        if ($s)
            {
            $info['browser'] = $parent;
            $info['version'] = $version;
            }
        }
    foreach ($os as $val)
        {
        if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
        }
    return $info;
    }
?>

<?php if ($b != "OTHER" && $o != "OTHER" && $v >= 5) { ?>

/* BEGIN CSS RENDERING */

body
    {
    background: #fff;
    font: small/140% verdana, sans-serif;
    padding: 4em;
    margin: 0;
    }

<?php
echo ($b =="OPERA") ? null : ".opera { display: none; }\n";
echo ($b =="IE") ? null : ".ie { display: none; }\n";
echo ($b =="FIREFOX") ? null : ".firefox { display: none; }\n";
echo ($b =="MOZILLA") ? null : ".mozilla { display: none; }\n";
echo ($b =="NETSCAPE") ? null : ".netscape { display: none; }\n";
echo ($b =="SAFARI") ? null : ".safari { display: none; }\n";
?>

/* END CSS RENDERING */

<?php } ?>

This article was written by David Hellsing

この記事はデヴィッド・ヘルシングによって書かれました。

David Hellsing is a designer and web developer living in Gothenburg, Sweden. He is the founder and gentle dictator of Stylegala and the swedish design firm monc.

デヴィッド・ヘルシングは、イェーテボリ(スウェーデン)に住んでいるデザイナーとウェブ開発者です。彼は、Stylegala(http://www.stylegala.com/)の創設者と優しい独裁者とswedishデザインの堅いmonc(http://www.monc.se/)です。

Are you a web publisher?

あなたはウェブ出版社ですか?

We are always looking for people who can write good articles about web design, css and standards. Are you one of them? Talk to us.

私たちはいつもウェブデザイン、css、および規格に関する良い記事を書くことができる人々を探しています。あなた方それらの1つはそうですか? 私たちに話してください(http://www.stylegala.com/contact/)。