[B! calc] ethertankのブックマーク

ethertank id:ethertank

calcに関するethertankのブックマーク (3)

Firefox 4 がサポート予定の calc() とは
Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。 calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはない
ethertank 2012/12/20
CSS

calc
リンク
画像の最大幅を calc() で制御する
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがあるこれをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
ethertank 2012/12/19
CSS

calc
リンク
CSS Values and Units Module Level 3
CSS Values and Units Module Level 3 W3C Candidate Recommendation Draft, 22 March 2024 More details about this document This version: https://www.w3.org/TR/2024/CRD-css-values-3-20240322/ Latest published version: https://www.w3.org/TR/css-values-3/ Editor's Draft: https://drafts.csswg.org/css-values-3/ History: https://www.w3.org/standards/history/css-values-3/ Implementation Report: https://draft
ethertank 2010/03/12
CSS3

calc
リンク
1