概要
状態:-
閲覧数:5,473
投稿日:2013-06-16
更新日:2015-09-16
・以前、Chrome「要素を検証」と「ページのソースを表示」の違いについて書いたけど、若干勘違いしていたことに気がつく
・「要素を検証」では、現在表示している全てのCSS内容が確認できるものだとばかり考えていたけれども、必ずしもそう言うわけではない
・「要素を検証」では、現在表示している全てのCSS内容が確認できるものだとばかり考えていたけれども、必ずしもそう言うわけではない
「確認できる例」と「確認できない例」の違い
確認できる例
hogeクラスで確認
.hoge, .hoge:after {
box-shadow: inset 0px -10px 0px 0px #333333;
確認できない例
.hoge:after {
box-shadow: inset 0px -10px 0px 0px #333333;
結論
・「:after擬似要素」だけを指定している場合は、Chromeの「要素を検証」で確認できない
・これ知らないと、ハマる可能性があるのではないだろうか?
・「要素を検証」で他人が作成したサイトの値を変更していく際、アレ? 思った通り動作しないよ、みたいなことがあるかも
→Chromeの「要素を検証」はあるまで補助的に利用するのが望ましく、最終的には生CSSを確認していく必要があるのだと思われ