ブラウザ用CSS非表示:ドゥグナインソード_体験交流
针对浏览器隐藏CSS之独孤九剑
Hide CSS for Browsers
我们都知道浏览器之间是有差异的,很多人在使用XHTML+CSS方式制作网页的时候都曾为此无比头痛。要在这些差异的影响下工作需要很多的技巧,“隐藏CSS”就是其中很重要的一种技巧(甚至是最重要的)。这种技巧的主要思想是,用某些方式对某些浏览器隐藏某些重载的CSS规则。
这篇文章并不是想教你如何使用这种技巧,它面向的是有一定CSS基础的设计开发者,我假定你曾经使用过某种隐藏CSS规则的方法。这里是想把可用的方法与被隐藏规则的浏览器都列出来,方便大家在平时工作时随时查阅。
在这张大表里列出了九种方法,我就称其为“独孤九剑”,希望能帮上你的忙:-D
注:此表格原载 w3development.de。
x | x | x | x | ||||||
x | x | x | x | x | x | x | |||
x | x | x | x | x | x | x | x | ||
x | x | x | x | ||||||
IE 5.5 Win | x | x | x | ||||||
IE 6 Win | x | x | |||||||
IE 4.01 Mac | x | x | x | x | x | x | |||
IE 4.5 Mac | x | x | x | x | |||||
IE 5 Mac | x | x | x | ||||||
Konqueror 2.1.1 | x | ||||||||
Mozilla 1.0 | |||||||||
Netscape 4.x | x | x | x | x | x | x | x | x | |
Netscape 6.01 | |||||||||
Netscape 6.1 | |||||||||
Netscape 6.2 | |||||||||
Opera 3.60 Win | x | ||||||||
Opera 4.02 Win | |||||||||
Opera 5.02 Win | |||||||||
Opera 5.12 Win | |||||||||
Opera Tech Preview 3 Mac |
このリストを読んだ後の私の最初の反応は次のとおりです。Mozilla と Opera は本当に神です。 Opera の最も古いバージョンでは 1 つのルールのみが有効となるため、後で隠しルールについて話すときは、基本的に Mozilla と Opera を無視します。以下に9つの「剣術」の動きをリストし、その横に個人的に推奨する使用シーンも示します。なお、私が推奨する内容がお客様のニーズに必ずしも一致するとは限りませんので、上表をご確認の上ご利用ください。
@import url("")
@import url("global.css")
古いバージョン (バージョン番号 5 未満) のブラウザのルールを非表示にします。
@import url()
@import url(global.css)
古いバージョンの Windows プラットフォーム (バージョン番号 5 未満) を使用するブラウザーの非表示ルール。
@import ""
@import "global.css"
古いバージョンの Windows プラットフォーム (バージョン番号 5 未満) を使用するブラウザーの非表示ルール。
media=""
ccooNetscape 4.x のルールを非表示にします。
@media
@media all { ... /* 隠す必要があるルール */ }
NN と IE のみを考慮すると、バージョン 4.x のルールのみが非表示になります。
コメント
<link href="global.css" type="text/css" rel="stylesheet" media="all">
これは精密誘導ミサイルです。 IE5 以前のルールのみを非表示にします。したがって、IE5 と IE5.5 に個別にルールを定義したい場合は、それを利用してください。
属性
#anySelector/* */ { color:#f00; }
もう一つの精密誘導ミサイル。古いブラウザを気にしない場合は、IE からのみルールを非表示にすることができます。属性セレクターの詳細については、「W3C ドキュメント。
子供
ccoo基本的には上記と同じですが、Mac プラットフォーム上の IE の一部のバージョンがこのルールをサポートしている点が異なります。
タンテック
p#tantek { voice-family: "\"}\""; /* 一部のブラウザには解析バグがあります */ voice-family:inherit; /* 以下のルールは無視されます */ 色: #f00; }
有名な隠し CSS トリックは、すべての「非モダン」ブラウザからルールを隠します。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます
