CSSのみで角丸＆半透明 : Weblog : SimpleIsm

CSSのみで角丸＆半透明

このタイトルぐっと来るべ？(何

まぁこの手のものには大体何か落とし穴があって、まぁ私の場合それはValidatorに通らないってことなんだけど。しかも結構ネックになってくるのはIEに適用させるってこと。半透明は何とかなったんだけど、角丸はJS使ったりとか、ファイルが2つ以上になってしまうので、今回は割愛。以下そのコード。

body {
   background: transparent url(back.gif) repeat fixed; /* 半透明を確認するため */
}

h1 {
   margin: 0;
}

/* Opera及び全てのブラウザに適用 */
.section {
   margin: 5%;
   padding: 5%;
   height: 500px;
   color: #ffffff;
   background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221%2E0%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%2215px%22%20ry%3D%2215px%22%20fill%3D%22%23000000%22%20stroke%3D%22%23000000%22%20stroke%2Dwidth%3D%221%22%2F%3E%3C%2Fsvg%3E);
   opacity: 0.5;
}

/* FxなどのGecko系に適用 */
.section,
x:-moz-read-only {
   border: 1px solid #000000;
   border-radius: 15px;
   -moz-border-radius: 15px;
   background-color: #000000;
   opacity: 0.5;
   -moz-opacity: 0.5;
}

/* SafariやChromeなどのWebKit系に適用 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
   .section {
      border: 1px solid #000000;
      border-radius: 15px;
      -webkit-border-radius: 15px;
      background-color: #000000;
      opacity: 0.5;
   }
}

/* IE6に適用 */
* html .section {
   border: 1px solid #000000;
   background-color: #000000;
   filter: alpha(opacity = 50);
}

/* IE7に適用 */
*:first-child + html .section {
   border: 1px solid #000000;
   background-color: #000000;
   filter: alpha(opacity = 50);
}

そのサンプル。要はそれぞれのブラウザ用にハックして、半透明と角丸を適用させるというもの。

意外とハマったのは、Operaに適用させるということ。Operaだけに適応させたいCSSハック - MOMIZINEを応用して、標準で最低限の見栄えを指定して、他の要素(半透明とか角丸)はそれぞれハックで指定するというもの。じゃあOperaはその最低限の見栄えでしか表示されないじゃん！ってなるけど、それは次の段落で説明。

ネックだったのはOperaでの角丸。ググってみると、Opera用のハックに-opera-border-radiusなるものがあったのだけど、上手く適用されないので、Operaで丸角を実現するCSSを試してみた (解決) - by edvakf in hatenaを参考に(というかまんまパクって)、SVG画像を作り、それをdata:スキームURLで指定し、エスケープした。ちなみに、エスケープする前のコードは<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100%" height="100%" rx="15px" ry="15px" fill="#000000" stroke="#000000" stroke-width="1"/></svg>。これ、指定しても自分の環境ではOpera以外では適用されなかった。理由は不明。とりあえずこれが上記の理由(Operaのみに適用)。