CSS3を調べてみた

2013/06/11 19:49

サイトの見た目を直したくてCSS3を調べてみました。

まずCSS3にどんな機能があるか列挙してみました。
参考:caniuse

  • @font-face Web fonts
    ウェブフォントを指定する
  • calc() as CSS unit value
    幅や高さといった長さの指定を計算式で書くことができる
  • 2.1 selectors
    CSS2.1でいろいろセレクタ(要素の選択)を追加
  • Counters
    複雑な数のカウントの仕方をCSS製作者が自在に操れる
  • Feature Queries
    あるプロパティと値のペアをサポートしている/いない状態にだけ、ブロック内の宣言を適用
  • Filter Effects
    画像処理フィルタ
  • Generated content
    要素の前後に自動的に文字列を挿入
  • Gradients
    グラデーション
  • Grid Layout
    グリッドに関する指定をまとめて行う
  • Hyphenation
    行が折り返される際にテキストをより良く配置するため、ブラウザが単語をどのように分割するかを設定
  • inline-block
    表示形式をインラインに流し込むことのできるブロック要素
  • Masks
    画像にマスクをかける
  • min/max-width/height
    幅と高さの最小、最大を指定
  • outline
    アウトラインのスタイル・太さ・色をまとめて指定
  • position:fixed
    要素を座標で固定
  • Regions
    コンテナの順番を自由に指定し、スタイルが適用された複数の既存コンテナにコンテンツを流し込む
  • Repeating Gradients
    グラデーションの繰り返しによる画像を作る
  • resize property
    閲覧者による要素のサイズ変更の可否と、リサイズ方向の制限を指定
  • Table display
    テーブルの構造を表現
  • 3D Transforms
    3D変形を適用
  • Animation
    CSS のスタイル設定を別の設定へ遷移させる
  • Background-image options
    Background-imageのオプション追加
  • Border images
    画像ボーダーを指定する
  • Border-radius (rounded corners)
    ボックスの4つのコーナーの角丸をまとめて指定
  • Box-shadow
    ボックスに1つまたは複数の影をつける
  • Box-sizing
    ボックスサイズの算出方法を指定する
  • Colors
    カラータイプの指定
  • Media Queries
    デバイスのスクリーンサイズによって、スタイルシートを割り振る
  • Multiple backgrounds
    背景画像レイヤー化
  • Multiple column layout
    カラムレイアウト
  • object-fit/object-position
    画像アスペクト比を保ちつつ用意された領域に収める
  • Opacity
    要素の透明度を指定
  • Overflow-wrap
    単語の途中で折り返しするかどうかを指定
  • selectors
    CSS3でいろいろセレクタ(要素の選択)を追加
  • Text-overflow
    オーバーフローしたテキストを「…」で省略
  • Text-shadow
    テキストに影をつける
  • Transforms
    2Dまたは3Dの変換
  • Transitions
    CSS プロパティが変化する際のアニメーションスピードの操作法を提供
  • word-break
    文の改行の仕方について指定
  • Flexible Box Layout Module
    CSS でレイアウトを行うために策定
  • Font feature settings
    OpenTypeフォント機能
  • Intrinsic & Extrinsic Sizing
    特定のレイアウトコンテキストに収まるボックスを記述
  • rem (root em) units
    ルート要素のフォントサイズを指定
  • Scoped CSS
    文書全体ではなく、 style要素の親要素、および、その子孫要素に対してのみスタイルが適用
  • TTF/OTF - TrueType and OpenType font support
    TrueTypeとOpenTypeのサポート
  • Viewport units: vw, vh, vmin, vmax
    仮想的なウィンドウサイズ
  • Canvas Drawings
    CSSでキャンバス書けるの?情報不明
  • pointer-events (for HTML)
    現在位置のリンクを無効
  • Reflections
    不明。情報もとむ!
  • Text-stroke
    テキストの加工
  • user-select: none
    ドラッグによる選択を防ぐ

まとめようと思いましたが数が多くてまとめきれませんでした。
この中から気になるのをピックアップしてまた検証してみたいと思います。

参考