ラベル grids の投稿を表示しています。 すべての投稿を表示
ラベル grids の投稿を表示しています。 すべての投稿を表示

2011年2月8日火曜日

YUI2と YUI3の CSSの比較

ついにGoogle Libraries APIがYUI3系の配信を開始した。
YUI 2 CSS ToolsからYUI 3 CSS Resourcesへ乗り換えるための準備として、変更されている点を洗いだしてみた。
(追記:比較したのは、YUI 2.8.2r1と YUI 3.3.0。)


fonts.css

変更なし


grids.css

根本的に変わったので、小手先の変更による対応は無理。
ただしclass名のプリフィクスも変わった(2はyui、3はyui3)ので、2と3は共存できる。


reset.css

buttonのmargin、paddingのリセットがなくなった。

button {
    margin: 0;
    padding: 0;
}



削除

delとinsのtext-decorationのリセットがなくなった。
del, ins {
    text-decoration: none;
}


削除

supとsubのvertical-alignが変わった。
sup {
    vertical-align: baseline;
    ↓
    vertical-align:text-top;
}
sub {
    vertical-align: baseline;
    ↓
    vertical-align:text-bottom;
}

button、optgroup、optionのfontのinheritがなくなった。
また、input、textare、selectのfont-styleのinheritがなくなった。
input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
button {
    *font-size: 100%; /* IEでリサイズ可能にするためだったらしい */
}



input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}

base.css

bodyのmarginが削除された。(余計なお世話だったので朗報だ。)
body {
    margin:10px;
}



削除

optgroup、del、sup、subのリセットされていたstyleの上書きが削除された。
reset.cssの方から削除されたので、baseで上書きする必要がなくなったらからだろう。
optgroup {
    font-weight:normal;
}
del {
    text-decoration: line-through;
}
sup {
    vertical-align: super;
}
sub {
    vertical-align: sub;
}



削除

クリック系のform要素の1pxのpadding(Opera対策らしい)が削除された。
button, input[type="checkbox"], input[type="radio"], input[type="reset"], input[type="submit"] {
    padding:1px;
}



削除

テキストボックス系のwidthが追加された。
これでテキストボックスのフォントをメイリオにしたときビヨーンと広がる問題が解消される。
input[type=text], input[type=password], textarea{
    width: 12.25em;
    *width: 11.9em;
}


こうして見ると、grids.css以外は大きな変更は少ないようだ。
del, ins, sup, subなんかはあまり使っていないだろうし。buttonが好きな人には影響あるのかな?
base.cssでbodyのmarginがなくなったのは影響があるかもしれないが、これもそのまま使っているサイトは少ないと思う。


(2011/2/9 追記)
base.cssのinput[type=text]とinput[type=password]の追加は影響する場合あり。属性セレクタより弱いセレクタで横幅を指定しているページでは、このbase.cssのスタイルに負けちゃうように変わっちゃうから。

2008年9月6日土曜日

CakePHP1.2の layoutで使える Helperのまとめ

head要素内に記述する要素など、layoutに書く要素のうちHelperで作成できるもののまとめ。



  • ドキュメント宣言 (参考:HtmlHelper::docType
    //引数なしの場合はXHTML1.0 Strict
    echo $html->docType();
  • Content-Typeのmetaタグ (参考:HtmlHelper::charset)※2008/09/13 誤り修正
    //デフォルトはPHPのdefault_charset???
    echo $html->charset();
  • CSS (参考:HtmlHelper::css
    複数ある場合は配列で渡せる。
    //webroot/css/foo.cssを読み込む場合
    echo $html->css('foo');

    //webroot/css/foo.cssとwebroot/css/bar.cssの2つを読み込む場合

    echo $html->css(array('foo', 'bar'));
  • JavaScript (参考:JavascriptHelper::link
    これも配列で渡せる。
    //webroot/js/foo.jsを読み込む場合


    echo $javascript->link('foo');



    //webroot/js/foo.jsとwebroot/js/bar.jsの2つを読み込む場合


    echo $javascript->link(array('foo', 'bar'));


    JavascriptHelperを使う場合、ControllerでこのHelperを有効にしておく。(「s」が小文字なので注意!)
    var $helpers = array('Html', 'Javascript');
  • その他、$html->meta('xxx')で作成できるもの (参考:HtmlHelper::meta
    • RSS ('rss')

    • Atomフィード ('atom')
    • favicon ('icon')
      • デフォルトはwebroot/favicon.ico
    • metaタグのkeyword('keyword')
    • metaタグのdescription ('description')


YUI Girdsを使うならこんな感じになる。
<<?php ?>?xml version="1.0" encoding="<?php echo ini_get('default_charset'); ?>" ?>
<?php echo $html->docType(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<?php echo $html->charset(); ?>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><?php echo $title_for_layout; ?></title>
<?php
echo $html->meta('icon', '/favicon.ico'); //サイト全体で共通のfaviconを使う場合
echo $html->css(array('foo', 'bar'));
echo $javascript->link(array('foo', 'bar'));
echo $scripts_for_layout;
?>
</head>

<body>
<div id="doc2" class="yui-t7">

<div id="hd">
ここにヘッダーを書く
</div><!-- #hd -->

<div id="bd"><div class="yui-g"><?php echo $content_for_layout; ?></div></div>

<div id="ft">
ここにフッターを書く
</div><!-- #ft -->

</div><!-- #doc/[2-4]?/ -->

</body>
</html>

少しくらいCSSやJavaScriptを書くだけなら、わざわざHelperを使わずに直接書いた方がいいかも。
JavaScriptは</body>の直前に書きたいが、これでは無理か...?



ブログ アーカイブ

tags