CSSハックを使わず、ブラウザ毎に表示を切り替えるテストを行っております。ベンダープレフィックスが効かない問題を解決したい

発生している問題・エラーメッセージ

ベンダープレフィックスを使用してブラウザ毎に表示の調整したく、
簡単な使い方のテストを行っているが、各ブラウザの表示は変わらなかった。

該当のソースコード

test.html

<!DOCTYPE html>

<html lang="ja">
	
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<link rel="stylesheet" href="reset.css">
		<link rel="stylesheet" href="test.css">
	</head>
	
	<boby>
		<p class="decoration">ブラウザ毎に表示切替</p>
	</boby>
	
</html>

test.css

.decoration{
	font-size: 50px;
	border: 1px solid;
	-moz-border-radius:5px;
	border-radius: 50px;
}

試したこと

IEでも試しましたが、結果は同じでした。

他のCSS(background-colorなど)を記述しても、
反映されませんでした。

補足情報（FW/ツールのバージョンなど）

基本的にGoogle Chromeで開発を行なっており、
今回はFirefoxでの表示を変更させるための
テストを行なっております。

環境は「Brackets」です。

CSSにて、「border-radius」の部分に
ブラウザの識別子「-moz-」
を先頭に付けてFirefoxを指定してますが、
Chromeの表示と同じになってしまいます。

ベンダープレフィックスを使用する場合、
何か別に準備をする事柄があるのでしょうか。

それとも、
基本的な書き方が間違っているのでしょうか。

適応できないCSSなども、
もしあれば教えていただきたいです。

宜しくお願い致します。

yambejp

2020/03/11 11:23

想定する出力を図示してもらえませんか？

10masa19

2020/03/11 13:40

ご提案ありがとうございます。他の回答で使えないことがわかりましたので、この件は特に問題ないのですが、ブラウザ毎の表示で本来解決したい問題が別にあります。 IEだけ画像が非表示になる問題です。ご対応いただけますでしょうか。

行動規範の内容に同意します

回答2件

-moz- などのvendor prefixは非標準なCSSのプロパティの場合に使うものです。特定のブラウザ向けに見た目を変更するために使うものではありません。 border-radius は標準化されているので、全てのブラウザで同じ見た目になります。

ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaScript API に接頭辞を追加することがあります。これにより、開発者は標準化プロセスの中で、理論上は、ウェブ開発者のコードを壊すことなく新しいアイデアを試すことができます。開発者は、ブラウザーの振る舞いが標準化されるまで、接頭辞を外したプロパティを導入するのを待つべきです。

https://developer.mozilla.org/ja/docs/Glossary/Vendor_Prefix

投稿2020/03/11 11:29

SeieiMiyagi

総合スコア247

10masa19

2020/03/11 12:30

vendor prefixはブラウザ毎の装飾を変更するために使うものではない、という事ですね。何のためにあるのか、という事が理解に苦しむところなのですが、もし、ご面倒でなければ非標準なCSSのプロパティの場合、という部分を詳しく解説していただきたいのですが。

maisumakun

2020/03/11 13:19

> 何のためにあるのか、という事が理解に苦しむところなのですが、標準化に「先行して」ブラウザが実装するためのものです。グラデーションやflexboxなど。正式制定の前に機能自体が二転三転することがありましたが、ベンダプレフィックスを入れることで、昔に書かれたものはそのまま、正式なプレフィックスなしのものは仕様どおり動作させることができます。ということで、正式実装された時点でベンダプレフィックスの役割は終わりです（ベンダプレフィックス付きも互換上しばらくは実装されますが、そのうち廃止されます）。

10masa19

2020/03/12 13:37

ベンダープレフィックスは機能の変更による表示の変化に対応した補助的な役割なんですね。リンクも拝見させていただきました。やはり使わないでコーディングできるようにならなければならない、という事を実感できました。詳しい解説、ありがとうございます。

行動規範の内容に同意します

ベストアンサー

ベンダープリフィックスを使って希望されている動作をさせることは不可能です。

Firefox最新版において、border-radiusを使うのにベンダープリフィックスは不要です。（参考：CanIuse）
検証ツールで確認するとわかりますが、-moz-border-radiusをFirefoxはもう解釈してくれないようです。不要どころか無効な記述になっています。

また、そもそもベンダープリフィックスはブラウザごとに表示を変えるための機能ではないので、border-radiusでなくてもそれを目的に使うのはやめた方が良いと思います。

投稿2020/03/11 11:29

hwatarig

総合スコア461

10masa19

2020/03/11 13:01

Firefoxはほぼコードの通りに動いてくれる、ということですね。私が別に抱えている問題でとあるページを作成したのですが、 IEだけ背景が半透明の画像が表示されず、真っ白になる、という現象が起きています。そもそも、現段階でのウェブページ開発を皆さんがどのようにされているのか気になるのですが、 chrome、IE、Firefox、Edge など全ての表示を同時に確認しながら、作業を進めるべきなのでしょうか。

hwatarig

2020/03/11 15:26

私が知っている限りでは、クロスブラウザチェックを行いながら作っていくという方法をとることはあまりなく、ほとんど完成したところでいっぺんにチェックをして問題があれば修正する、という流れで進めることが多いです。そうしたほうが効率が良いからです。そうやってチェックと修正を繰り返していれば、ブラウザ間で差が出る記述にどういうものがあるかを経験から知ることができます。また、CSSやJavaScript等の機能の、ブラウザ間での対応状況の差をまとめたサイトもあります。回答にも貼りましたが、 https://caniuse.com/ が有名です。ある程度知識がつけば、「この記述はブラウザによって差が出てしまうから避けよう」とか「この記述はブラウザによってはうまくいかないかもしれないからリファレンスで対応状況を調べてから使おう」というような判断ができるようになります。そうなればクロスブラウザチェックをしてはじめて問題に気がつく、ということは減っていきます。 Google ChromeやFirefoxのようなモダンブラウザで問題が起きることはそう多くないです。問題になるのはもっぱらIEです。「どのような記述で問題が起きやすいか」の勘が全くないうちは、IEでこまめに表示確認をするのも良いかもしれません。（ちなみに、EdgeもIEと同じく問題を起こしがちでしたが、もうすぐアップデートされる予定のバージョンではほぼ解決されると思います。詳しくはChromium Edgeで調べてください）

10masa19

2020/03/13 02:22

知識やスキルのアップはやはり実践が一番のようですね。ブラウザの違いによって生じる差異をある程度網羅できるくらいになろうと思います。とても勉強になりました。沢山の知恵いただき、ありがとうございます。

行動規範の内容に同意します

あなたの回答