Q&A
組み方次第です。
ケース、パターンのコードを例示してください。
###概要
ページコンテンツの背景を黒くするfirefoxアドオンを作成したいのですが、CSSの優先度の決まり方はそう簡単ではないようです。インラインのstyleにimportantを付けたものが最も強いと思っていましたが、機能しないサイトもあるようです。
このような場合の解決策はあるでしょうか？
単純にこれが一番強いと言えるものは存在しないようです。
組み方とは何のことでしょうか。
自身のサイトで動かしたいのではなく、あらゆるサイト上で動かしたいのです。
youtube、reddit、アマゾンなど、異なるサイトで背景を黒くしたいです。
しかしサイトごとに設定が異なりますから、うまく黒くならない場合もありますよね。
＞組み方とは何のことでしょうか。
CSS,HTML またはJavaScript つまりコードの組み方です。
＞youtube、reddit、アマゾンなど、異なるサイトで背景を黒くしたいです。
全て自身のサイトではないですがどういうことでしょうか。ユーザーページのカスタマイズのことでしょうか。（私はいずれもアカウント持ってないので詳しくないですが）
仕組みが違う以上は「そのサイトの仕様にあわせて適宜対応する」が答えるになると思います。もちろん仰っているように同じやり方で一概にできるわけではないと思います。
https://addons.mozilla.org/ja/firefox/addon/darkreader/
このような背景を変更するアドオンがあります。似たようなことをしたかったです。
では一律で背景を変更できるような方法はないということですね。
個別に対応するとなると労力がかかりすぎるので、一律で変更できる方法を探していました。
作りが違うのに同じやり方できくわけがないです。
CSSの基本はあと勝ちとはいえ、JavaScriptで変えられていたらきかないわけですし。
しかも提示のものはあくまでFirefoxのアドオンです。
Chromeなどにも拡張はありますが、それはそこにしかきかない機能で、その人にしかきかない機能です。アドオンや拡張で対応したところで自分にしかきかないので意味がないのではないでしょうか。
もう少しそのあたり具体的に質問本文に追記しておいてください。（でないと、この課題に対する解決策は誰も出せないと思います）
参考にしているものがあるのであれば、コードを読むのが早いと思います。
回答1件
0
ベストアンサー
カスケーディング (Cascading)
- 6.1. Cascading Origins - CSS Cascading and Inheritance Level 4
- 6.1. カスケード法における出自 — CSS Cascading and Inheritance Level 4 （日本語訳）
文書言語の規約に則って，ソース文書用に作者が指定するスタイルシート。 例えば HTML では，文書内に含められたり, 外部へリンクされ得る。
作者出自（ author origin ）
文書言語の規約に則って，ソース文書用に作者が指定するスタイルシート。 例えば HTML では，文書内に含められたり, 外部へリンクされ得る。
利用者出自（ user origin ）
利用者は、個々の文書用に，スタイル情報を指定することもある。 例えば，利用者がスタイルシートが含まれたファイルを指定することもあれば、 UA が利用者スタイルシート（あるいはそのようにふるまうもの）を生成する UI を供することもある。
UA 出自（ user agent origin ）
適合 UA は、既定のスタイルシート（あるいはそのようにふるまうもの）を適用するものとする。 UA の既定のスタイルシートは、文書言語の要素を，文書言語にて一般に期待されている呈示を満たす仕方で呈示するべきである（例えば 視覚系ブラウザは，HTML の em 要素を italic フォントで呈示するなど） — 例： HTML の UA スタイルシート [HTML]。
- 6. Cascading - CSS Cascading and Inheritance Level 4
- 6. カスケード法 - CSS におけるカスケード法と継承 — CSS Cascading and Inheritance Level 4 （日本語訳）
- Transition declarations [css-transitions-1]
- Important user agent declarations
- Important user declarations
- Important author declarations
- Animation declarations [css-animations-1]
- Normal author declarations
- Normal user declarations
- Normal user agent declarations
以下、日本語訳。
- CSS Transitions 宣言
!important規則を持つ User-Agent 宣言 (デフォルト・スタイルシート)!important規則を持つ User 宣言 (ユーザ・スタイルシート)!important規則を持つ Author 宣言 (Webサーバ上で宣言されたスタイルシート)- CSS Animations 宣言
- 通常の Author 宣言
- 通常の User 宣言
- 通常の User-Agent 宣言
詳細度 (specificity)
詳細度の計算法。
- 16. Calculating a selector’s specificity - Selectors Level 4
- 16. 選択子の詳細度の計算法 - Selectors Level 4 （日本語訳）
HTMLのstyle属性の詳細度。
スタイル属性 内の宣言は、その属性を有する要素に適用される。 この宣言は、カスケードにおいては，［ 出自は**作者(Author)**であって, 詳細度はどの選択子よりも高い ］ものと見なされる。
詳細度を計算した上で、下記セレクタが最優先されます。
- 詳細度が最も高いセレクタ
- 詳細度が同値の場合は、後から宣言されたセレクタ
最優先されるスタイル
(前提) CSS Transitions 宣言、User-Agent宣言は一般に制御不可なので、考慮しないものとします。
次の全ての条件を満たすスタイルが最優先されます。
- ユーザ・スタイルシートで最も詳細度が高いセレクタ (詳細度が同値のセレクタが複数存在する場合、最後に宣言されたセレクタ)
!important規則を持つプロパティ値 (同一セレクタ上では、最後に宣言された プロパティ値)
Re: blendegg さん
投稿2019/07/21 04:31
編集2019/07/22 09:15
総合スコア18196
あなたの回答
tips
プレビュー
