Modernizrを使用してHTML5機能を検出する
Modernizrは、次世代のWebテクノロジーのネイティブ実装の可用性を検出する小さなJavaScriptライブラリです。
| 機能 | CSSプロパティ | JavaScriptチェック |
|---|---|---|
| @ font-face | 。fontface | Modernizr.fontface |
| キャンバス | 。canvas | Modernizr.canvas |
| キャンバステキスト | 。canvastext | Modernizr.canvastext |
| HTML5オーディオ | 。audio | Modernizr.audio |
| HTML5オーディオ形式 | NA | Modernizr.audio [format] |
| HTML5ビデオ | 。video | Modernizr.video |
| HTML5ビデオ形式 | NA | Modernizr.video [format] |
| rgba（） | 。rgba | Modernizr.rgba |
| hsla（） | 。hsla | Modernizr.hsla |
| border-image | 。borderimage | Modernizr.borderimage |
| border-radiusbox-shadow | 。borderradius | Modernizr.borderradius |
| box-shadow | 。boxshadow | Modernizr.boxshadow |
| 複数の背景 | 。multiplebgs | Modernizr.multiplebgs |
| 不透明度 | 。opacity | Modernizr.opacity |
| CSSアニメーション | 。cssanimations | Modernizr.cssanimations |
| CSS列 | 。csscolumns | Modernizr.csscolumns |
| CSSグラデーション | 。cssgradients | Modernizr.cssgradients |
| CSSリフレクション | 。cssreflections | Modernizr.cssreflections |
| CSS2D変換 | 。csstransforms | Modernizr.csstransforms |
| CSS3D変換 | 。csstransforms3d | Modernizr.csstransforms3d |
| CSSトランジション | 。csstransitions | Modernizr.csstransitions |
| Geolocation API | 。geolocation | Modernizr.geolocation |
| 入力タイプ | NA | Modernizr.inputtypes [type] |
| 入力属性 | NA | Modernizr.input [attribute] |
| localStorage | 。localstorage | Modernizr.localstorage |
| essionStorage | 。sessionstorage | Modernizr.sessionstorage |
| Webワーカー | 。webworkers | Modernizr.webworkers |
| applicationCache | 。applicationcache | Modernizr.applicationcache |
| SVG | 。svg | Modernizr.svg |
| SVGクリップパス | 。svgclippaths | Modernizr.svgclippaths |
| SMIL | 。smil | Modernizr.smil |
| WebSQLデータベース | 。websqldatabase | Modernizr.websqldatabase |
| IndexedDB | 。indexeddb | Modernizr.indexeddb |
| Webソケット | 。websockets | Modernizr.websockets |
| ハッシュ変更イベント | 。hashchange | Modernizr.hashchange |
| 履歴管理 | 。historymanagement | Modernizr.historymanagement |
| ドラッグアンドドロップ | 。draganddrop | Modernizr.draganddrop |
| クロスウィンドウメッセージング | 。crosswindowmessaging | Modernizr.crosswindowmessaging |
| addTest（）プラグインAPI | NA | Modernizr.addTest（str、fn） |
-
RGBAを使用したCSSの透明性
CSSの透過性にはRGBA（）値を使用します。アルファチャネルパラメータを設定して、色の不透明度を指定します。 以下は、RGBAを使用してCSS透過性を実装するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div { width: 200px; heigh
-
CSSでのデータ属性（data- *）の使用
data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl { margin: 2%; } p { width: 60%; background-color: lightgreen; padding: 2%; color: white; text-alig