Q&A
その警告が出たブラウザは何でしょうか。
警告が出ている画面キャプチャなどもご提示いただけますか？
Standard peoperty 'border-radius' should come after vendor-perfixed property'-webkit-border-radius'.の警告が出まして、Google でしらべてもわかりませんでした。この警告の意味を知り、対策したいです。
いかに、HTMLとCSSを載せます。
HTML
1<!doctype html> 2<html> 3<head> 4<title>住宅設計施工の美浜工務店</title> 5<meta charset="utf-8"> 6<link href="index.css" rel="stylesheet" type="text/css"> 7<link href="contact_form.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11<div id="container"> 12 <header> 13 <div id="Logo_area"> 14 <h1><a href="#"><img src="imagesのコピー/Logo.gif" alt="美浜設計株式会社"></a></h1> 15 </div> 16 <div id="Navi_area"> 17 <div id="banner"><a href="contact.html"><img src="imagesのコピー/Contact.gif" alt="お問い合わせ"></a></div> 18 <ul> 19 <li><a href="contact.html">資料請求</a></li> 20 <li><a href="#">サイトマップ</a></li> 21 <li><a href="#">リクルート</a></li> 22 <li><a href="#">トップ</a></li> 23 </ul> 24 </div> 25 </header> 26 <main> 27 28 <div id="Side_navi"> 29 <ul> 30 <li id="navi01"> 31 <h2><a href="#"><img src="imagesのコピー/SideNavi_Top_out.gif" alt="トップ" ></a></h2> 32 </li> 33 <li id="navi02"> 34 <h2><a href="#"><img src="imagesのコピー/SideNavi_Guide_out.gif" alt="会社概要"></a></h2> 35 </li> 36 <li id="navi03"> 37 <h2><a href="#"><img src="imagesのコピー/SideNavi_Owners_out.gif" alt="実例集" ></a></h2> 38 </li> 39 <li id="navi04"> 40 <h2><a href="#"><img src="imagesのコピー/SideNavi_ModelHouse_out.gif" alt="モデルハウス" ></a></h2> 41 </li> 42 <li id="navi05"> 43 <h2><a href="#"><img src="imagesのコピー/SideNavi_Blog_out.gif" alt="匠のブログ" ></a></h2> 44 </li> 45 <li id="navi06"> 46 <h2><a href="#"><img src="imagesのコピー/SideNavi_Event_over.gif" alt="見学会" ></a></h2> 47 </li> 48 <li id="navi07"> 49 <h2><a href="#"><img src="imagesのコピー/SideNavi_Recruit_out.gif" alt="資料請求" ></a></h2> 50 </li> 51 </ul> 52 </div> 53 <div id="MainBox_sub"> 54 <img src="imagesのコピー/ContactImage.jpg" alt="お問い合わせイメージ"> 55 <div class="SubPage_title"><h2>お問い合わせ</h2></div> 56 <form> 57 <p> 58 <label> 59 <span>お名前 </span> 60 <input type="text" name="name" size="50" maxlength="50" required> 61 </label> 62 </p> 63 </form> 64 65 66 67 68 </div> 69 70 71 72 </main> 73 <footer>©️2019 Tek-cell.inc All rights reserved.</footer> 74</div> 75</body> 76 77</html>
CSS
1form { 2 width: 650px; 3 4} 5 6form p { 7 margin: 0; 8 padding: 10px; 9 border-bottom: 2px solid #fff; 10 font-size: 12px; 11 background: linear-gradient(#fff,#6fc);/*グラデーション*/ 12 13 -moz-background: linear-gradient(top,#fff,#6fc); /*ファイヤフォックスでグラデーションを適応させるため*/ 14 -webkit-background: linear-gradient(top,#fff,#6fc); /*Google Chromeでグラデーションを適応させるため*/ 15 16} 17 18form p span { 19 display: inline-block;/*非改行でたかさ、横幅が指定できるようになる*/ 20 width: 160px; 21 text-align: left; 22 margin: 0px; 23 24} 25 26form p input { 27 padding: 3px 6px; 28 margin: 0; 29 color: #666; 30 border: none; 31 border-radius: 9px; 32 -webkit-border-radius: 9px; 33 -moz-border-radius: 9px; 34 background: #fff; 35 box-shadow: 2px 3px 5px -2px #ccc inset; 36 -webkit-box-shadow: 2px 3px 5px -2px #ccc inset; 37 -moz-box-shadow: 2px 3px 5px -2px #ccc inset; 38} 39
最後から１行目、２行目、５行目、６行目
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
-webkit-box-shadow: 2px 3px 5px -2px #ccc inset;
-moz-box-shadow: 2px 3px 5px -2px #ccc inset;
に対してStandard peoperty 'border-radius' should come after vendor-perfixed property'-webkit-border-radius'.の警告が出ます。
ブラウザはGoogle Chromeです。
回答3件
0
ベストアンサー
私のChromeでは再現しなかったのでエラーの意味から対策を捻出します。
Standard peoperty 'border-radius' should come after vendor-perfixed property'-webkit-border-radius'
Google翻訳：
標準のプロパティ 'border-radius'はvendor-perfixedプロパティの後に来るべきです '-webkit-border-radius'
つまり、ベンダープレフィックスがついた指定は、本指定はベンダープレフィックス指定より後に書きましょう、ということですね。
css
1 border-radius: 9px; 2 -webkit-border-radius: 9px; 3 -moz-border-radius: 9px; 4 box-shadow: 2px 3px 5px -2px #ccc inset; 5 -webkit-box-shadow: 2px 3px 5px -2px #ccc inset; 6 -moz-box-shadow: 2px 3px 5px -2px #ccc inset;
↓
css
1 -webkit-border-radius: 9px; 2 -moz-border-radius: 9px; 3 border-radius: 9px; 4 -webkit-box-shadow: 2px 3px 5px -2px #ccc inset; 5 -moz-box-shadow: 2px 3px 5px -2px #ccc inset; 6 box-shadow: 2px 3px 5px -2px #ccc inset; 7
ただ、新しいブラウザではベンダープレフィックスなしでも動作する指定も多くあるはずなので、
基本的には外す方向で考えても良いかもしれません。
2019年現在のベンダープレフィックスの対応状況
2019年3月でのベンダープレフィックスの対応状況です。比較的有名なCSS3のプロパティの対応状況を掲載しています。現在、最新のブラウザであれば、ほとんどベンダープレフィックスは必要がなくなりました。Operaに関しては2013年2月にレンダリングエンジンがwebkitに変更したため、-o-はなくりました。
投稿2019/04/12 04:40
総合スコア80850
0
↓これと関連する話では？
ベンダー接頭辞付きのプロパティのみの定義、または標準プロパティは書かれていてもベンダー接頭辞付きのプロパティの後に書かれていない場合にも警告が出ます。
投稿2019/04/12 04:41
総合スコア36074
0
あまりHTML関係はやっていないのでよくわかりませんが、
メッセージの通り、やってみましたか?
エラーメッセージ原文: Standard peoperty 'border-radius' should come after vendor-perfixed property'-webkit-border-radius'. 意訳: 標準プロパティ border-radiusは 独自プロパティ -webkit-border-radiusの後に置くべきである
ですね。
なので、順番を border-radius -> 何か -> -webkit-border-radius -> 何か じゃなくて、
-webkit-border-radius -> 何か -> border-radius -> 何か のように少なくとも -webkitなんちゃらをborder-radiusの前に置いてみては?
投稿2019/04/12 04:51
総合スコア4958
あなたの回答
tips
プレビュー
