ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 の一部の非表示の高度な属性の混合属性の使用法の詳細な説明

css3 の一部の非表示の高度な属性の混合属性の使用法の詳細な説明

伊谢尔伦
伊谢尔伦オリジナル
2017-07-19 10:52:042644ブラウズ

-webkit-user-select と -moz-user-select

おそらく、著作権上の理由かどうかにかかわらず、ユーザーが Web サイト上のテキストを選択できないようにすることがよくあるでしょう。通常、誰もがそれを実装するための js を持っています。別の解決策は、-webkit-user-select と -moz-user-select の値を none に設定することです。

この属性は注意して使用してください。ほとんどのユーザーは、将来使用するためにコピーして保存できる情報を表示するためにここにいるため、このアプローチは役に立たず、効果的でもありません。コピー&ペーストを無効にしても、ユーザーはソース ファイルを表示することで必要な情報を取得できます。この属性が Webkit と Gecko でサポートされている理由がわかりません。

ブラウザのサポート: WebKit、Gecko.

-webkit-Appearance および -moz-Appearance

画像をラジオ ボタンとして偽装したいと思ったことはありませんか?それとも、チェックボックスのような入力ボックスですか?ということで登場です。リンクを常にボタンのように見せたくない場合でも、必要に応じてそれを行う方法を示す例を以下に示します:

Example

   a {
-webkit-appearance: button;
-moz-appearance: button;
}

ブラウザのサポート: WebKit、Gecko.

text-align: -moz-center/-webkit-center

この属性 (正確には「属性値」) の存在は非常に驚きです。ブロックレベルの要素を中央に配置するには、通常、それを margin:0 auto に設定します。ただし、要素のコンテナの text-align プロパティを -moz-center および -webkit-center に設定できるようになりました。同様に、-moz-left、-webkit-left または -moz-right、-webkit-right を設定することで、要素を左また​​は右に設定することもできます。

ブラウザのサポート: WebKit、Gecko.

-webkit-tap-highlight-color

この属性は iOS (iPhone および iPad) でのみ使用されます。 Javascript で定義されたリンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景で表示されます。この動作をリセットするには、-webkit-tap-highlight-color を任意の色に設定します。

このハイライトを無効にするには、色のアルファ値を 0 に設定します。

例: ハイライトの色を 50% の透明な赤に設定します:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

ブラウザのサポート: iOS (iPhone および iPad) のみ。

概要: none(1) PC側でaタグにこのスタイルを定義する目的は、IEブラウザでaタグをクリックしたときに表示される点線を解除することです。 IE7 以前のブラウザはこの属性をまだ認識していません。Chrome でデフォルトのテキスト ボックスのフォーカス スタイルをキャンセルするには、hidefocus="true"(2)input を textarea{outline:none} に追加する必要があります。モバイル端末では利用できません。テキストボックスのデフォルトのスタイルを削除したい場合は、-webkit-tap-highlight-color を使用して、フォーカス時にデフォルトのスタイルをキャンセルできます。いくつかのモバイル リセット ファイルにこの属性が追加されているのを見ましたが、実際には冗長です。

webkit-Appearance -webkit-Appearance: none; //入力ボックスとボタンのネイティブの外観を削除します。iOS でこの属性を追加することによってのみ、ボタンと入力ボックスのスタイルをカスタマイズできます。注: この属性を使用した後の入力のタイプが異なると、動作も異なります。テキストとボタンにはスタイルがなく、ラジオとチェックボックスは直接消えます。

以上がcss3 の一部の非表示の高度な属性の混合属性の使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。