2

Windows 7、Windows 8、Linux など、異なるオペレーティング システムである CSS を使用してプラットフォームをターゲットにする方法があるかどうかを知りたいです。

メニュー要素にカーソルを合わせると色が変わるulリストとborder-bottom設定を備えたスタイルシートがあります。問題は、すべてのブラウザー (Chrome、FF IE など...) で、Windows 7 と Windows8/Ubuntu の間で li アイテムが同じように表示されないことです。行の高さ、パディング、マージンなど、さまざまな CSS プロパティを使用してみました。しかし、私が何をしても、アイテムのレイアウトはwin7とwin8 / ubuntuの間で同じではありません。さまざまな PC でテストし、同じバージョンのブラウザー (最新の Chrome、最新の FF、IE9...) 間でテストしました。

cssハックでWindows 8などをターゲットにできますか？それともUbuntu / Linuxだけですか？

4

2 に答える 2

10

使用しているブラウザーの性質、少し演繹的な推論、およびいくつかのトリックにより、これを行う方法がいくつかあります...すべてがそれを行うわけではありませんが、CSS のみを使用した OS ターゲティングに使用できる方法がいくつかあります。もちろん、スクリプトはより多くのオプションを提供します。これは、以下のテキストに記載されているように、約 6 か月の調査と正確さのために私が行った作業を反映しています。

現時点では、Chrome でこれを行う方法がわかりません。特に Opera は Chrome と同じ方法論を多く使用しているため、Opera については調べていません。Chrome はバージョン 3 まで Mac 用のバージョンをリリースしませんでした。また、Mac の場合、Google は OS X 10.6-10.8 は Chrome 49 以降はサポートされないという声明を出しました。そのため、Chrome 50 以降は Mac OS X 10.9 (Mavericks) または新しい。

ただし、Firefox、Internet Explorer、および Safari にはより優れたオプションがあります。

Firefox 4 以降では、Windows テーマが使用されていることを検出できるため、古いバージョンの Firefox でも、少なくとも Windows を使用しているかどうかを検出できます。私はこれをしばらく前に作成し、今日再びテストしました：

@media screen and (-moz-windows-theme) {
    .windows {
        color:red;
    }
}

同様に、これは Windows 以外のすべてで機能し、これも Firefox 4 以降で機能します。

@media not screen and (-moz-windows-theme) {
    _:-moz-ui-valid, .nonwindows {
        color:red;
    }
}

-moz-os-version は firefox 25 メディア クエリに追加されましたが、 https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries の mozilla ドキュメントによると、いくつかのオプションしかありません。

OS: windows-xp | Windows Vista | windows-win7 | windows-win8 | windows-win10

したがって、このセットは最新の Firefox ブラウザー バージョン >= 25 でのみ機能します。この投稿の更新の時点で、Firefox はバージョン 35 です。

@media screen and (-moz-os-version:windows-xp) {
    .windows,.winxp {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-vista) {
    .windows,.vista {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win7) {
    .windows,.win7 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win8) {
    .windows,.win8 {
        color:red;
    }
}

@media screen and (-moz-os-version:windows-win10) {
    .windows,.win10 {
        color:red;
    }
}

Microsoft の Edge ブラウザ (以前の Spartan) は、現時点では Windows 10 にのみ搭載されています。これを検出するには:

/* Microsoft Edge Browser */

@supports (-ms-ime-align:auto) {
    .windows,.win10 {
        color:red;
    }
}

注: 以前の -ms-accelerator:true メソッドは新しいバージョンで変更されたため、特定のバージョンのエッジをターゲットにするために使用できますが、すべてのバージョンをターゲットにすることはできません。-ms-ime-align:auto は、2017 年でもそれらすべてに対して機能します。

Macintosh コンピュータを検出する方法もあります。

Firefox >= 24 では、メディア クエリで検出可能な OS X 10.7 Lion 以降用の新しいスクロールバー オーバーレイ メソッドが導入されました。

@media screen and (-moz-overlay-scrollbars) {
    .mac,.mac10_7up {
        color:red; 
    } 
}

Firefox >= 25 には、バージョン 25 で OS X フォント スムージングのサポートが追加されたため、Mac OS X を検出する方法もあります。

@supports (-moz-osx-font-smoothing:auto) {
    .mac,.mac10_6up {
        color:red; 
    } 
}

@media クエリと @supports フィルターは相互にネストできるため、次のことが可能になりました -- Firefox 24 以降で OS X 10.6 Snow Leopard のみをターゲットにするために:

@supports (-moz-osx-font-smoothing:auto) {
  @media not all and (-moz-overlay-scrollbars) {
    .mac,.mac10_6 {
        color:red;
    } 
  }
}

Firefox 17 以降は Mac OS X 10.6 以降 (Snow Leopard 以降) のみをサポートするため、上記の OS X CSS ルールのいずれかの結果が得られた場合、OS X 10.5 以前を使用していません。( https://en.wikipedia.org/wiki/History_of_Firefox#Version_17_.28ESR.29 )

逆に、Firefox 25 以降では、OS X (10.6 以降) を無効にすることができます。10.5 以前はこのバージョンの Firefox をサポートしていないため、これは Mac ではないことを意味します。

@supports (-moz-appearance:none) and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    .nonmac {
        color:red; 
    } 
}

Firefox 49 の時点で、Firefox はバージョン 10.9 より前の Mac OS X をサポートしなくなったため、バージョン 48 以下の場合は OS X バージョン 10.8 以前である必要があり、バージョン 17 ～ 48 の場合は OS X 10.6 ～ 10.8 である必要があります。同じトークンで。

私がこれを書いたとき、iOS (iPad と iPhone) には Firefox のバージョンがありませんでした。そのため、OS X フォント スムージングを備えた Firefox は、現時点では Apple モバイル デバイスではなく、Mac コンピュータのみを対象としています。iOS 版 Chrome と同様に、iOS 版 Firefox は Safari エンジンを使用するため、iPad と iPhone で Safari ハックを使用します。つまり、どちらも Safari のようにターゲットにできますが、ひそかに、彼らがフードの下にいると言っているものではありません。

両方を一度に否定することで、残っているものをターゲットにする方法があります: Android/Linux、再び Firefox 25 以降:

@supports (-moz-appearance:none) and (background-attachment:local)
  and (not (-moz-osx-font-smoothing:auto)) {
    @media not screen and (-moz-os-version) { 
        .lindroid {
           color:red; 
        }
    } 
}

バージョン 6 以降 (Windows XP 以降) の Internet Explorer を使用している場合は、明らかに Windows を使用しています。それは複数の方法で決定することもできます。

条件付きコメントは Internet Explorer 9 までのウィンドウに存在していたため、これらを使用してより多くの情報を収集できます。

これは Windows があることのみを検出しますが、Internet Explorer 6-9 は Windows プラットフォームにのみ存在するため、必ずしもバージョンを検出するとは限りません。現時点では、Internet Explorer 11 が現在のバージョンであるため、10 と 11 は検出されませんが、9 以前は検出されます。

<!--[if (gte IE 6)&(lte IE 9)]><style type="text/css">

    .windows {
        color:red;
    }

</style><![endif]-->

Internet Explorer 6 は Windows XP にしか存在しなかったか、古いバージョンの Windows は現在使用されていないため、これはそのバージョンで機能します。

<!--[if (IE 6)]><style type="text/css">

    .windows,.winxp {
        color:red;
    }

</style><![endif]-->

Internet Explorer 7 は Windows XP Vista に存在し、Internet Explorer 8 以降で互換モードの選択をクリックするとエミュレートされることがよくあります。

これは、Internet Explorer 10 以降を使用している場合に機能するため、Windows 7 または 8 を使用しています。

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { 
    .windows {
        color:red;
    }
}

私が個人的に作成した作品の 1 つは、Internet Explorer 11 以降を検出します。これは、Windows 7 以降、最大 8.1 で使用できます。

_:-ms-fullscreen, :root .windows { 
    color:red; 
}

Internet Explorer の条件付きコメントを使用せずにメディア クエリを使用する場合は、次のものが存在します。

Internet Explorer 6-7 (したがって、Windows XP およびそれ以前の Windows 7 まで) を検出するには、次のようにします。

@media screen\9 
{
    .windows {
        color:red;
    }
}

これは Internet Explorer 9 用に作成したもので、何も存在しませんでした。（だから勝つ7または勝つビスタ）

@media screen and (min-width:0\0) and (min-resolution:.001dpcm) 
{
    .windows {
        color:red;
    }
}

これは Internet Explorer 8 を検出します (したがって、windows XP-windows 7)

@media \0screen
{
    .windows {
        color:red;
    }
}

昨年、さまざまな部分からこのメディア クエリを作成しました。これは Safari 6.1 以降を処理します。この投稿の時点で、Safari はバージョン 7 です。Mac およびベース Android ブラウザーなどのモバイル デバイスは、次の方法で検出されます。

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
    .mac_or_mobile {(;
        color:red;
    );} 
}

これは、ほとんどの新しい Mac を検出するためのより良い方法です。iPad (または Android) などのモバイル デバイスは含めません。これも Safari 6.1 以降用なので、Mac です...:

@media screen and (-webkit-max-device-pixel-ratio:1) and (min-color-index:0)
{
    .mac_osx {(;
        color:red;
    );} 
}

代わりにモバイルが必要な場合、これは最近の高解像度のもので機能します。

@media screen and (-webkit-min-device-pixel-ratio:1.1) and (min-color-index:0)
{
    .retina {(;
        color:red;
    );} 
}

携帯電話とタブレットについては、こちらをご覧ください。https://jeffclayton.wordpress.com/2014/07/22/css-for-hi-def-mobile-retina-devices/とここ:https://jeffclayton.wordpress.com/2014/07/28/css-hack-anything-but-ios/

Mac にはしばらくの間 Internet Explorer がありましたが、バージョン 5.5 以降の新しいバージョンは作成されませんでした。

Windows にもしばらくの間 S​​afari がありましたが、バージョン 5 以降の新しいバージョンは作成されませんでした。ほとんどの Windows ユーザーは Safari を使用しないため、通常、Safari が検出されたときに Windows を除外できます。

上記のスタイルをすべてドキュメントに含めると、以下の div は上記のスタイルの結果を反映します。

Per Firefox and Internet Explorer/Edge:

<div class="windows"> If this is Windows this is red </div>

<div class="winxp"> If this is Windows XP or older this is red </div>

<div class="win10"> If this is Windows 10 this is red </div>

Per Firefox:

<div class="vista"> If this is Windows Vista this is red </div>
<div class="win7"> If this is Windows 7 this is red </div>
<div class="win8"> If this is Windows 8 this is red </div>

<div class="nonwindows"> If this is NOT Windows this is red </div>

<div class="nonmac"> If this is NOT Mac OS X this is red </div>

<div class="mac"> If this is Mac OS X this is red </div>

<div class="mac10_7up"> If this is Mac OS X 10.7 or newer this is red </div>
<div class="mac10_6up"> If this is Mac OS X 10.6 or newer this is red </div>
<div class="mac10_6"> If this is Mac OS X 10.6 only this is red </div>

<div class="lindroid"> If this is Linux or Android this is red </div>

Per Safari:

<div class="mac_osx"> If this is a Mac using Safari
(desktop or laptop computer) this is red (includes old mobile devices but not before iOS 6) </div>

<div class="mac_or_mobile"> If this is a Mac or a mobile device using Safari
(Android or iPad/iPhone) this is red </div>

<div class="retina"> If this is a hi-def mobile device using Safari
(Android or iPad/iPhone) this is red </div>

検出に関するその他の注意事項...

Internet Explorer/Edge に基づく Windows バージョン (参照しやすいように):

As stated above if you detect Internet Explorer 6, you are using XP (or older Win)
If you detect Internet Explorer 7-8, you are using Windows XP, Vista, or Windows 7
If you detect Internet Explorer 9 you are using Windows Vista or Windows 7
If you detect Internet Explorer 10 you are using Windows 7 or Windows 8.0
If you detect Internet Explorer 11 you are using Windows 7 or Windows 8.0/8.1 or Windows 10
If you detect Microsoft Edge you are using Windows 10

Windows 10 は、この投稿の時点での Windows の最新バージョンです。

歴史的な興味のために、もしあなたが本当にしたいのであれば、私が見つけた古いハックを使って Mac 上で Internet Explorer 5 以下を実際に判断することができます:

/*\*//*/ .mac_internet_explorer { color:red; } /**/

Internet Explorer の Mac バージョンは、Intel モデルではなく、古い PowerPC Mac でのみ利用可能でした。

于 2014-06-14T09:58:04.587 に答える
2

これが CSSだけで可能だとは思いませんが、少しの js がプラットフォームを識別するのに役立ちます: http://rafael.adm.br/css_browser_selector/

于 2013-03-03T20:33:33.830 に答える