CSS3 ベンダープレフィックス確認用ページ

ベンダープレフィックスとは

ブラウザが独自の拡張機能や草案段階の仕様を先行実装する場合に、CSS側でブラウザを識別するための接頭語のこと。

将来的な仕様変更に備えて、プロパティ名や値には前後に「-(ハイフン記号)」をもったベンダープレフィックスを付けることにより、ブラウザの種類を識別します。

以下のサンプルではCSSで接頭語を要素ごとに指定して、実装状況を確認しています。

  • -webkit

    GoogleChrome Safari

  • -moz

    Firefox

  • -o

    Opera

  • -ms

    InternetExplorer

  • no_vendor

サンプルコード

角丸

ボックス指定

背景グラデーション

変形効果

フレキシブルボックス


li#no_vendor{
  border-radius: 12px;
  box-shadow: #000000 1px 1px 2px 2px;
  box-sizing: border-box;

  background-image: linear-gradient(
    top, #aaaaaa, #666666
  );

  transform: translate(0px, 20px);
  transition-property: opacity;
  transition-duration: 2s;
}
li#no_vendor div{
  display:box;
}
view source

JavaScript

$(function(){
  $('#demo ul li').append('<div><p>1</p><p>2</p><p>3</p></div>');
});

CSS

#demo ul:after{
  content:"";
  display:block;
  clear:both;
}

#demo ul li{
  float:left;
  width:160px;
  height:480px;
  background-color:#aaaaaa;
  margin:12px;
  padding:4px;
  border:8px dotted #eeeeee;
}
#demo ul li em{
  display:block;
  width:140px;
  height:160px;
  background-image:url('browser.png');
  background-repeat:no-repeat;
  font-size:20px;
  font-weight:bold;
  line-height:280px;
}

#demo ul li div{
  background-color:#ffffff;
  height:80px;
}

#demo ul li div p{
  width:20px;
  height:20px;
  text-align:center;
  border:1px solid #333333;
}

#demo img{
}




li#webkit{
  -webkit-border-radius: 12px;
  -webkit-box-shadow: #000000 1px 1px 2px 2px;
  -webkit-box-sizing: border-box;
  background-image: -webkit-gradient(
    linear, left top, left bottom, from(#aaaaaa), to(#666666)
  );
  background-image: -webkit-linear-gradient(
    top, #666666, #aaaaaa
  );
/* Chrome10+,Safari5.1+ */

  -webkit-transform: translate(0px, 20px);
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 2s;

}

li#webkit div{
  display:-webkit-box;
}


li#moz{
  -moz-border-radius: 12px;
  -moz-box-shadow: #000000 1px 1px 2px 2px;
  -moz-box-sizing: border-box;

  background-image: -moz-linear-gradient(
    top, #aaaaaa, #666666
  );

  -moz-transform: translate(0px, 20px);
  -moz-transition-property: opacity;
  -moz-transition-duration: 2s;
}

li#moz div{
  display:-moz-box;
}

li#o{
  -o-border-radius: 12px;
  -o-box-shadow: #000000 1px 1px 2px 2px;
  -o-box-sizing: border-box;

  background-image: -o-linear-gradient(
    top, #aaaaaa, #666666
  );

  -o-transform: translate(0px, 20px);
  -o-transition-property: opacity;
  -o-transition-duration: 2s;
}

li#o div{
  display:-o-box;
}


li#ms{
  -pie-border-radius: 12px;

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#666666')";
  -ms-transform: translate(0px, 20px);
  -ms-transition-property: opacity;
  -ms-transition-duration: 2s;
}


li#no_vendor{
  border-radius: 12px;
  box-shadow: #000000 1px 1px 2px 2px;
  box-sizing: border-box;

  background-image: linear-gradient(
    top, #aaaaaa, #666666
  );

  transform: translate(0px, 20px);
  transition-property: opacity;
  transition-duration: 2s;
}
li#no_vendor div{
  display:box;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-css/css3-vendor-identifier/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。