softie note

2011年2月21日月曜日

XSLT - テンプレート

XSLT

Source

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

<xsl:output
  method="html"
  encoding="utf-8"
  omit-xml-declaration="no"
  doctype-public="-//W3C//DTD XHTML 1.1//EN" 
  doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

<xsl:template match="/">
  <xsl:apply-templates select="html"/>
</xsl:template>

<xsl:template match="@*">
  <xsl:copy/>
</xsl:template>

<xsl:template match="node()">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

</xsl:stylesheet>

Preview

iframe

XSLT Capsulized XHTML

XSLT でカプセル化した XHTML

source

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="#"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">
<xsl:output
  method="html"
  encoding="utf-8"
  omit-xml-declaration="yes"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

<xsl:template match="xsl:stylesheet">

<html xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>xslt capsulized xhtml</title>
  <style type="text/css">
    /*@import url(style.css);*/
    body { font-family:arial, sans-serif; }
  </style>
</head>
<body>

<h1>xslt capsulized xhtml</h1>

</body>
</html>

</xsl:template>
</xsl:stylesheet>

Preview

iframe

XHTML 1.0 Strict - テンプレート

XHTML 1.0 Strict

source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>XHTML 1.0 Strict</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">/* @import url(""); */</style>
</head>
<body>
<h1>XHTML 1.0 Strict</h1>
</body>
</html>

Preview

iframe

XHTML 1.1 - テンプレート

XHTML 1.1

source

<?xml version="1.0" encoding="UTF-8"?>
<!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>
  <title>XHTML 1.1</title>
  <style type="text/css">/* @import url(""); */</style>
</head>
<body>
<h1>XHTML 1.1</h1>
</body>
</html>

Preview

iframe

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月15日火曜日

ブックマックレット

RequestPolicy で google.com 検索結果のリンクからリダイレクトできないとき

javascript:var d=document,u=d.getElementsByTagName('noscript').item(0).innerHTML.split("'")[1];d.body.innerHTML='<p style="text-align:center;"><a href="'+u+'">'+u+'</a></p>';

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 を指定して対処する。