Places It's Tempting To Use `display: None;`, But Don't | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! You want to hide something on a page, so: .hide { display: none; } But wait! By applying that class to an element you’ve immediately made that content “inaccessible” by screen readers. You’ve probably known this forever, but still, the poison apple sneaks into our code once in a while. I don
The CSS3 Test
Your browser scores 0% Determined by passing tests out of total for features
The Brand New CSS4 Selectors Specification
CSS4 Already?! Yeah, the CSS4 specification is already in the early stages of being written (for selectors, anyway). I must stress just how work in progress this is, in the sense that some of this stuff might not make the final cut, while more stuff may be added. It will however give you an idea of what you can expect some of this to turn up in the real CSS4 specification. Most of these ideas are
* { box-sizing: border-box } FTW - Paul Irish
One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is
キャプションの幅を画像の幅に合わせる
Fig 1: Wikipedia のキャプションつき画像の例 ちょっとわかりにくいタイトルになってしまいましたが、つまり Wikipedia のやつ (Fig 1) みたいに、「画像 (またはビデオなどの埋め込みコンテンツ) の下にキャプションをレイアウトするとき、キャプションが複数行にわたる場合は画像の幅に合わせて折り返したい (ただし画像の幅はバラバラ)」というのをシンプルかつ汎用的なかたちで実現する CSS を考えてみました。というか、このブログのレイアウト用にけっこう長いことあれこれ考えてたもののこれといった手が思いつかなくて放置していたんですが、上手い解決を Stack Overflow でみつけた のでパクった、という話です。 <figure> <img src="/img/photo.jpg"> <figcaption>Lorem ipsum dolor sit amet</
Profiling CSS for fun and profit — Perfection Kills
I’ve been recently working on optimizing performance of a so-called one-page web app. The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. I’m not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experim
CSS 2.1 Advent Calendar '11
基礎以上ベスト・プラクティス未満。 CSSハックのことは忘れる CSSハックの多くは便利で強力なものだが、それに頼るのは危険だ。まずは普通にCSSを書くことに注力するべきだろう。その上で条件付きコメントやModernizrを使うかCSSハックをあえて使うか決めると良い。 色の書き方は統一する キーワードによる色の指定や#rrggbb、rgb()といくつかの方法で色を指定することができるが、#rrggbbの桁を合わせることも含めていずれかに統一した方が可読性とメンテナンス性が上がるだろう。 %は長さの単位ではない border-widthなどで使用できない理由はそれだ。他にも使用することができないプロパティがいくつかある。また%はコンテキストによって基準になる単位が大きく変わる他継承においてもある意味不可解な挙動を起こすことがある(line-heightなど)ので、使用には注意を払う必要があ
WebKitでのSVGを背景画像にすると起こるバグ
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
7 CSS Snippets to Borrow from HTML5 Boilerplate
Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate The "Scavenger" series looks at large-scale projects and focuses on the small snippets you can take from the project without needing the complete project. Starting a web application from scratch can be a boring, time-consuming task. Paul Irish's HTML5 Boilerplate project is an exceptional starting point for creating a website of any
Cross-Browser Inline-Block
Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this: and begin to cry. Normally, this type of layout would be a cakewalk. Fixed width, fixed height, float:left and you’re done. Buuuuut, the design needs to work with variable amounts of content, which means if one of these blocks has
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidで-webkit-box-reflectによる鏡面効果を指定する方法 Androidで-webkit-box-reflectのマスク処理が使えない！とつぶやいたら@mattari_pandaからurl()による指定は聞くよと教えていただきました。 そもそも-webkit-box-reflectってなによ! 画像などの反射を制御することができるCSSプロパティです。WebKit独自のプロパティなのでSafariやChrome以外のブラウザでは利用できません。 -webkit-box-reflect:<direction> <length> <image>; といった感じで指定が可能です。 directionには上(above)、下(below)、左(left)、右(right)が指定できます。 lengthには反射画像の距離を指定できます。 imageにはマスク画像が指定できま
Introduction - Scalable and Modular Architecture for CSS
SMACSS was written in 2011. This site remains for archival and educational purposes. I have long lost count of how many web sites I’ve built. You would think after having built a few hundred of them I would have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code
Google Web Fontsにある等幅フォント - Hail2u
2011-11-21現在、Google Web Fontsで提供されているWebフォントには等幅フォントが8つあります。目で探したので漏れはあるかも。良いのがあったらここで使おうかと思って探したんですが、まぁ使うことはなさそうですね。 Demo: Monospace Fonts from Google Web Fonts Anonymous Pro Cousine Droid Sans Mono Inconsolata Lekton Nova Mono Ubuntu Mono VT323 使用に耐えるのはかろうじてInconsolataくらいでしょうか。Lektonはコロンビアで絶大な人気を誇るらしいですが……。 WindowsのChromeでは以下のように非常に……なんていうか……その……。 まぁこんなものですよね！
Further Hardening of the Bulletproof Syntax
For context, please read our earlier post about this syntax. A potential looming problem with the new syntax we introduced earlier this month was raised by Microsoft. The soon-to-be-released IE9 comes with a feature that allows it to render in both IE7 and IE8 Modes. In these two modes, Microsoft ‘fixed’ the parser bug that affected the actual IE7 and IE8. This fix breaks the @font-face syntax for
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Schepp/box-sizing-polyfill: A CSS box-sizing: border-box polyfill for IE 6/7
CSS3 Reference ～ CSS3のリファレンスサイト ～
Transparent Double Border
CSS3 - Webkit - Vertical Scrollbars | CSSDeck
10 Definitive Web Font Stacks for Designers | George Butler Web Design - Halifax Drupal Web Design
cubic-bezier.com
