softie note: css

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

2011年3月10日木曜日

はてなブックマークが ajax に変更されている

Firefox で RequestPolicy を導入しているので、他のドメイン(st-hatena.com)にある JavaScript のコードから ajax でブックマークのエントリーを取得されても何も表示されなくてこまる。

Firebug の [接続タブ] で確認すると、どうやら次のような URL でブックマークのエントリーを取得しているらしい。

http://b.hatena.ne.jp/(Hatena ID)/fragment?tag=(Tag name)

直接アクセスしてみたら問題なく表示されたので、元のページからエントリーデータのページへ移動するブックマークレットを作ってひとまず回避。

bookmarklet

javascript:var a=/^(http:\/\/b\.hatena\.ne\.jp\/[^/]+\/)(.*)$/.exec(location.href);location.href=a[1]+'fragment'+((a[2]&&a[2]!='')?'?tag='+a[2].replace(/\/$/,'').split('/').join('&tag='):'');

2011.03.11 追記

ブックマークレットで移動した先のページを開いているときに st-hatena.ne.jp を RequestPolicy で許可したら Favicon がリピートして気持ち悪いことに。。。

Stylish で次の css を導入して解決。

Stylish

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("b.hatena.ne.jp") {
  h3.entry { background:no-repeat; padding-left: 20px; }
}

2011.04.11 追記

cookie を削除したら ajax を使わない元のはてなブックマークに復帰。
何かの弾み(何かクリック?)で ajax 機能のスイッチが入ってしまっていたみたい。

タグ一覧の右上にある [クラウド(or リスト)表示に切り替え] ボタンをクリックしていたら、また ajax に。。。

b.hatena.ne.jp の Cookie を覗いてみると "fast" 項目が、値 "1" で追加されている。
どうやらこれが ajax 機能のスイッチみたい。

2011年2月21日月曜日

css で気をつけること - display:inline-block

メモ

Gecko 1.9(Firefox 3) からサポート。
※ 参照: (mozilla.org) display - MDC Doc Center
→ https://developer.mozilla.org/en/CSS/display
IE7 (以下?)は、インライン要素への適用をサポート(block 要素へ適用しても効かない)。
※ 確認 IE7/Windows XP
IE7 (以下?)は、ブロック要素へ display:inline;zoom:1; を適用することで代用。
(yomotsu.net) 「書籍などに紹介されていない display : inline-block について」
→ http://www.understandard.net/css/css008.html
※ スタイルシートを使用しない方が読みやすいかも (2011.02.22 追記)
IE7 (以下?)で display:inline;zoom:1; を適用することで逆に起こる問題について。
(webtech-walker.com)「hasLayoutプロパティがtrueで発生するバグ - Webtech Walker」
→ http://webtech-walker.com/archive/2007/11/27033016.html
※ (2011.02.22 追記)

検証用

iframe

iframe 文書の HTML

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>display:inline-block</title>
 <style type="text/css">
  * { font-size:100%; }
  body { font-family:arial; sans-serif; }
  body>div { margin-bottom:0.5em; }
  .div, .span {
   display:inline-block;
   padding:0.2em 0.5em;
   border:solid 1px gray;
   font-weight:bold;
  }
  div.block { border:solid 1px gray; padding:1em; }
 </style>
 <!--[if lte ie 6]><style type="text/css">
  body div { margin-bottom:0.5em; }
  body * div { margin-bottom:0; }
 </style><![endif]-->
 <!--[if lte ie 7]><style type="text/css">
  .div, .span { vertical-align:middle; }
 </style><![endif]-->
</head>
<body>
 <h1>display:inline-block</h1>
 <div class="block">text element<div class="div">div style="display:inline-block;"</div>text element</div>
 <div class="block">text element<span class="span">span style="display:inline-block;"</span>text element</div>
</body>
</html>

2011年2月17日木曜日

a 要素を button 要素の代わりに使う

注意点

ポインターが a.button の上にあるときのセレクタ a.button:hover は効かないけれど a#button:hover は Ok
※ 確認: ie7, firefox3.6.13

検証

iframe

iframe の contentWindow.document

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>a element button</title>
 <style id="button" type="text/css">
  a.button, span.button, #button, #class { display:inline-block; }
  .button a, a.button { text-decoration:none; }
  a.button span, span.button a { display:block; }
  a.button span, span.button a, a#button, a#class {
   font-size:80%;
   font-weight:bold;
   padding:0.2em 0.5em;
   cursor:default;

   border:solid 1px gray;
   background-color:#ccc;
   color:gray;
  }
  a.button span:hover, span.button a:hover, a#button:hover, a.button:hover {
   border-color:#444;
   background-color:white;
   color:black;
  }
 </style>
 <style type="text/css">
  body { font-family:arial,sans-serif; }
  h1 { font-size:100%; }
  ul li { margin-bottom:1px; }
 </style>
</head>
<body>
 <h1>a element button</h1>
 <ul>
  <li><span class="button"><a onclick="this.parentNode.parentNode.innerHTML+='!';">span.button&gt;a</a></span></li>
  <li><a class="button" onclick="this.parentNode.innerHTML+='!';"><span>a.button&gt;span</span></a></li>
  <li><a class="button" id="button" onclick="this.parentNode.innerHTML+='!';">a#button</a></li>
  <li><a class="button" id="class" onclick="this.parentNode.innerHTML+='!';">a.button</a></li>
 </ul>
</body>
</html>

2011年2月14日月曜日

css で注意すること

そのつど更新

display:inline-block は inline 要素なので、既定の vertical-align:baseline だと、要素の下のほうに英文字の g のように線がベースラインの下まで出るためのスペースが確保されるので vertical-align:top で対処する。

iframe
object

block 要素の中の block 要素を position:absolute や float:left すると親 block 要素の高さが 0 になるので、height を指定して対処する。

2010年9月30日木曜日

ブラウザのうまくない CSS レンダリング - その 1 (line-height)

固定テキストをページのフッタとして表示している "position:absolute;bottom:0;" の div 要素に内容を追加して 2行したので、style に "line-height:120%;" を追加したところ、画面からはみでてスクロールバーが。。。

検証用コンテンツ

iframe

メイリオだと line-height:120% で。。。

iframe

verdana だと line-height:120% は問題ないけれど、

iframe

line-height:100% で。。。

iframe

MS P Gothic だと line-height:100% でも大丈夫。

確認

Microsoft Windows XP Professional Version 2002 Service Pack 3
Firefox version 3.6.9

Internet Explorer 7 で確認したら、画面からはみ出ないけれど、フォントの上側の一部が表示されないことがあるので、どちらにしても "position:absolute;bottom:0;" と "line-height:xxx" の組み合わせは注意。

2010年4月23日金曜日

Outlook 2007 で HTML メールが崩れて表示される

原因

Outlook 2007 では HTML タグや属性と CSS が制限されている。詳細は下記リンク先を参照。

msdn.microsoft.com - Outlook 2007 のレンダリングで適用される HTML と CSS のリスト
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

流し読みした制限内容のいくつかあげると、下記は当然として

script と各種イベント(onxxx="..." など)
frame と iframe 関連
form 関連
java や flush など(applet, object...)

下記の制限も注意

background の color 以外
レイアウトを変形する CSS(position, display, float, clear...)
表示内容を制限する CSS(overflow, visibility...)

確認

未確認

2010年2月25日木曜日

@import と link rel="stylesheet" のどちらを使うか

いまのところ、下記のような記述にする。

<style type="text/css">
  @import url("style_a.css");
  @import url("style_b.css");  
  * { font-size:100%; }
  :
  :
</style>

参照

並行ダウンロードできないので @import でネストさせない方がいいという内容

[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか (coliss.com)
http://coliss.com/articles/build-websites/operation/css/css-2-ways-to-include-a-stylesheet.html

2010年2月23日火曜日

css テンプレート(下書き)

  <style type="text/css">
    * {
      font-weight: normal;
      font-size: 100%;
      font-family: "メイリオ", meiryo, verdana, "MS Pゴシック", MSPGothic, sans-serif;
    }
    code { font-family:"Courier New", "HGGothicM", monospace; }

    h1 { font-size:100%; }
    h2 { font-size: 90%; }
    h3 { font-size: 85%; }
    .content { font-size:85%; }

    dd { margin:0; }
    .code { white-space:pre; }

  </style>

参照

CSS テンプレートで作成したサンプル (外部リンク)

履歴

2010.02.25 追加
code { font-family:"Courier New", "HGGothicM", monospace; }

2009年1月12日月曜日

<a> button

<style type="text/css">
  a.button {
  display:inline-block;
  border:solid 1px gray;
  vertical-align:middle;
  background-color:#eee;
  padding:0.25em 0.5em;
}
</style>
<div>
<a class="button" href="javascript:alert('Button A');">Button A</a>
<a class="button" href="javascript:alert('Button B');">Button B</a>
</div>

実例: Button A Button B

登録: 投稿 (Atom)