pagetop

クロスブラウザのCSSコーディング法やツール (改)

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加このエントリをTwitterに追加

787498と、前のブログで書いたこれが色々とおかしかったのでもう一度作成。
CSS Reset

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}

Internet Explorer conditionnal comments

IEのみに適用
<!--[if IE]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6のみに適用
<!--[if IE6]>
  	<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Internet Explorer hacks
.class {
  width:200px; /* すべてのブラウザ*/
  *width:250px; /* IEのみ */
  _width:300px; /* IE6のみ */
  .width:200px; /* IE7のみ */
}

Targeting Opera only(operaのみ)
@media all and (min-width: 0px){
    .classname {}
}

Targeting Safari only(safariのみ)
html:lang(en)>body  .classname {}

Targeting Google Chrome only(Google Chrome)
body:nth-of-type(1) p{
   color: #333333;
}

IE6 CSS Fixer
IE6用にCSSを変えてくれるものらしいです。
Visit IE6 CSS Fixer

Xenocode Browsers
プラグインをいれて画面と電源ボタンみたいなのを押すとブラウザが起動します!
いつか詳細記事を作成したいと思っています。
Xenocode Browsers

Browsrcamp : How your sites looks on a Mac
Macを使用していないWindowsユーザーにとっては有難いサービスです。
Mac(Safari)のキャプチャを撮ってくれるのです。
Browsecamp

元コンテンツ
15+ techniques and tools for cross browser CSS coding
抜粋して紹介しました。

Post a Comment

Eメールは必ず 入力してください。. *このマークが付いている物は必須項目です。

*
*

clear
clear

a