[B! css][screen] terkelのブックマーク

terkel id:terkel

cssとscreenに関するterkelのブックマーク (3)

A tale of two viewports — part one
In this mini-series I will explain how viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen. This page is about the desktop browsers, and its sole purpose is to set the stage for a similar discussion of the mobile browsers. Most web developers will already intuitively understand most desktop concepts. On mobile we’ll find the
terkel 2012/12/02
css

javascript

viewport

screen

window
リンク
5 years later: print CSS still sucks
This tweet had me revise a 5 year old experiment on how print CSS affects page loading, especially in the light of mobile browsers. So I tweaked the test ever so slightly to print out timing info in the document.title and after the page is done. The test is essentially how does a slow print stylesheet affect the rendering of the page on the screen. <link rel="stylesheet" href="screen.css" media="s
terkel 2012/04/26
パフォーマンスを考えると印刷用 CSS はファイルを分割しないほうがいいですよ、という話

css

screen

performance
リンク
v6.15
ブラウザーのサイズによって文字の大きさを少し変えるようにしたので、それに合わせてemを使ってレイアウトするようにした。縦のリズムもちゃんと計算してやろうかと思ってるけど面倒になってきた。やって思ったのはやっぱりcalc()が必要ということ。違う単位を混ぜられるのはとても手軽だ。Sassでも無理だし、将来的にもできるようにならないし。faviconもちょっとだけ変えた。カラム定義カラムは本文を9カラムで48em程度にしたかったので以下のようにした。 $column: 3.5em; $gap: 1em; これで9カラムで47.5emになる。Style Guideだとそこらでダブルクリックするとカラムがオーバーレイ表示されるようになってる(_grid-overlay.scss使った)。12カラムが収まる場合はマルチカラム……にしたかったけど、とりあえずはタイトルや日付けをちょっとずらすだけに
terkel 2012/02/02
css

em

screen
リンク
1