sanitize.css を用いてcssの初期化をしたいがエラーが発生する

Question

前提

sanitize.cssを用いてcssの初期化をしようとしています。
https://csstools.github.io/sanitize.css/
上記のサイトの下にあるDownloadからcssファイルをダウンロードしましたが、-webkit-appearanceという宣言にエラーが発生し、反映されませんでした。
プロパティが非標準ですという意味合いのエラーメッセージが出ているのですが、何も変更をしていないので正直原因がよくわかっていない状態です。
この問題が自分の環境が原因なのかよく分からなかったため、解決策を知りたいです。

エディターはVSCodeを使用しています。

実現したいこと

• cssをsanitize.cssを用いて初期化したい
• -webkit-appearanceにでるエラーコードの原因を突き止めたい
• sanitize.css以外で初心者におすすめの初期化方法があればご教授願いたいです

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

エラーメッセージ
🚨️ Property is nonstandard. Avoid using it.

Changes the appearance of buttons and other controls to resemble native controls.

(Chrome, Safari 3)

Syntax: none | button | button-bevel | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist |

該当のソースコード

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

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

https://csstools.github.io/sanitize.css/
上記のサイトからダウンロードしました。

Comments

[int32_t]

そのエラーは何が出したものですか? エディタかブラウザですか?

[退会済みユーザー]

エディタが出したものです

Answer 1

エディタが出す警告やエラーはたまに役立ちますが、そんなに重要ではありません。ブラウザでページを見て期待通りに動いていれば無視してもよい場合があります。この場合は、無視していいです。

-webkit- で始まるCSSプロパティは非標準なので使うべきではないというエラーです。最新のメジャーブラウザだけを考えるなら -webkit-appearance を appearance に変更するとよいのですが、古いブラウザをサポートする必要があればまだ -webkit-appearance と書く必要があります。

エディタの拡張機能の設定で「-webkit-appearance はエラーにしない」という設定があるかもしれません。

Comments

[退会済みユーザー]

ありがとうございます。
ブラウザに合わせたコーディングをしないといけないという意識を持っていませんでした。
また、拡張機能を設定し直すといった経験がなかったので、参考になりました。
追加で質問させていただきたいのですが、int32_tさんがcssを初期化する際に利用されているサイトなどがあれば教えていただけないでしょうか。