Q&A
コードはマークダウンのcode機能にてご提示ください。
あと、念のための対象機能を利用している周辺のHTMLもあったほうが「これによって何をどう実現したいか」というところも再現しやすくなるので可能な範囲で。
-webkit-background-clip: の部分に波線(エラー)がでます。訂正方法を教えてください (CSS)
https://jajaaan.co.jp/css/css-headline/
↑こちらのサイトのcssをコピーしてホームページの見出しを作成中です
デザインは「文字ゴールドグラデーション」
h2 {
font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif;
padding: 1rem 2rem;
color: #fff;
background: #000;
}
h2 span {
background-image: -webkit-linear-gradient(315deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
上記をcssに貼り付けました。
今回はh2をh1に変えて、他は変えていませんが波線のエラーがでます。どなたか修正方法ご存じであれば教えて頂けると幸いです
【詳細】
chromeでオフラインでホームページ作成中です。
cssにエラーは出ていますがchrome表示ではデザインは崩れず、きちんと表示されている状態ですが、エラーのままではいけないと思いましたので、質問させていただきました。
↓こちらがcssのエラー表示です-webkit-background-clip: のところに波線エラーがでます。
↓こちらがエラー表示にカーソルを持っていくと表示される内容です
Determines the background painting area.(Chrome, Safari 3)
Also define the standard property 'background-clip' for compatibilitycss(vendorPrefix)
上記の内容でどこに問題があるのかお分かりいただけるとよいのですが、詳細が不十分であればおっしゃっていただければ、また追記させていただきます。
何卒、よろしくお願いいたします
回答1件
0
ベストアンサー
黄色の波線は、重大なエラーではなく、
こうした方がいいという警告です。
（古い構文である、CSSならば、ベンダープレフィックス関連で追記が必要、など）
なので、意図したものであるならば、
直す必要が無いものがほとんどです。
赤い波線の場合は、重大なエラーで動作しないものがほとんどなため、修正が必要な可能性が高いものです。
投稿2023/01/19 02:42
総合スコア9528
教えて下さりありがとうございます
重要なエラーの場合は赤い波線になるということを覚えておきます!
そして、こうしたほうがいいという警告、とのことですが、今回の場合どうしたらより良いのかお分かりでしたら教えて頂けますでしょうか。また、こういった警告の訂正をどのようにしたらよいか分からないのですが、検索サイトなどご存じであれは教えて頂けますと幸いです。皆さんどのようにされているのでしょうか。。。
エラー文を翻訳すれば、よくわかると思います。
だいたいのエラーは、翻訳すれば内容がつかめます。
今回は、ベンダープレフィックスだけでなく、
ベンダープレフィックスを外した方も定義した方がいい、みたいな警告です。
今googleで訳してみたのですが、日本語の意味が分かりにくいですね
訳した文章はこちら→「互換性のために標準プロパティ「background-clip」を定義します」
この【定義します】は→【定義したほうがいいですよ】という意味なんですね!
一つ勉強になりました! 本当にありがとうございます。
今後同じような警告が出た時にも役立ちそうです!
あなたの回答
tips
プレビュー
