IE 9以下に存在するセレクター数制限にはまった
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
iPhone Safariでドキュメントの幅はどうやって決定されるか
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / まずはじめに、これは合ってるかわかりません…。 でもたぶん合ってると思う。 width=device-width, initial-scale=1で、iPhoneを縦→横に傾けたら、 「1.5倍にズームした状態でさらにドキュメントの幅が480pxになる」 という謎の挙動を理解してみる。 viewportについては、Androidの動きを正と見て、iPhoneの挙動を理解したほうが容易。 initial-scaleとwidthを同時に指定した場合がめちゃくちゃにややこしい。 initial-scaleは、PCのブラウザいうとズーム機能に近いが、それによりドキュメントの幅が調節される。これは例えば
pre要素で折り返しをするためのCSS
pre要素でソースコードを折り返すためのCSSです。最近は色々なSyntax Highlighterが登場しているので必要ないかもしれませんが、URLなどの横に長い文字列をpre要素で表示したいときに有効かもしれません。 １．CSS 以下のCSSでpre要素の文字が折り返せます。「white-space: pre-wrap」または「word-wrap: break-word」に未対応のブラウザはoverflowプロパティでスクロールします。 pre { white-space: pre-wrap; word-wrap: break-word; overflow: auto; } 以下は、過去の記事でよくみかけた設定です。 pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; w
Google ChromeでＭＳ ＰゴシックをArial+メイリオに置換する
最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳ Ｐゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-rangeプロパティを利用すれば、英数字はArialで日本語部分はメイリオで置換するなどというわがままなことが出来る。 unicode-rangeプロパティはグリフのコードを範囲指定することによってsrcプロパティで指定されているフォントのどの部分を利用するかを決定するもの。つまりArialから英数字(PDF: Basic Latinと呼ばれる範囲)を取ってきてＭＳ Ｐゴシックを置換する場合はGo
日本のブラウザシェア率
Sorry, JavaScript is required to view Global Stats charts.
inline-blockの隙間を無くす話 その後 | nagomu.me
nagomu.me About Search inline-blockの隙間を無くす話 その後 Apr 03, 2011 - @nagomu 一つ前の記事（『inline-blockの隙間を無くす話』）「font-familyいじくるの面倒だよね」とか言っていたら、@understandさんが、解決して下さった！ 感謝！ 若干トリッキーな手法だけど、font-familyをいじくるよりずっと実用的だし、font-familyいじくるよりはトリッキーじゃない（？）気がします。 ただ、「なんでか」が判明していないので、有識者の方、教えてください！ 変更のポイントは下記の通りです。 letter-spacingは設定不要 word-spacingは分かりやすく-1em 親要素にdisplay:table（Webkit対策とのこと） Windows Opera以外はword-spacingをlet
各ブラウザのUTF-7の対応状況 - 葉っぱ日記
今時のブラウザがどれくらいUTF-7をまだサポートしているか調べてみたのでメモ。全てWin32上。 IE8 レスポンスヘッダでcharset=utf-7と指定したとき、およびコンテンツの先頭(<html>より前)にUTF-7のBOMである +/v8- を挿入しておいた場合にUTF-7となる。<meta>でcharset=utf-7と指定した場合はページを表示したときにはUTF-7とはならないが、リロードするとUTF-7となる。 IE9beta レスポンスヘッダでcharset=utf-7と指定したとき、およびコンテンツの先頭(<html>より前)にUTF-7のBOMである +/v8- を挿入しておいたとき、<meta>でcharset=utf-7と指定したときにそれぞれUTF-7となる。 Firefox 3.6.13 <meta> で charset=utf-7 と指定しておくと、ページを
これは便利！ブラウザ/レンダリングエンジンごとのCSS設定をJavaScriptで解決する·CssUserAgent MOONGIFT
CssUserAgentはJavaScriptを使ってブラウザ/レンダリングエンジンごとのクラス定義を生成する。 [/s2If] CssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特にここ数年のようにWebブラウザの種類が増えると大変だ。 このようなクラスが定義される レンダリングエンジンで考えても数多く、さらにバージョンによってレンダリング結果が異なるとなると発狂しそうになってしまうほどだ。そんな苦しむWebデザイナーの方々を救うかもしれないのがCssUserAgentだ。 CssUserAgentはua-*というクラス名を自動的に定義するJavaScriptファイルだ。「ua-（ブラウザ名）」「ua-（ブラウザ名）-（メジャー番号）」「ua-
IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
【レビュー】IE6、IE7、IE8、IE9をクラッシュさせる方法 | エンタープライズ | マイコミジャーナル
Taranfx.com - Your Gateway to Technology, Redefined. ブラウザは特定のHTMLやCSS、JavaScriptのコードを読み込むとクラッシュしたりフリーズすることが知られている。しかもそれは複雑怪奇なコードではなく、とても短いコードでも起こることがわかっている。特にIEをクラッシュさせたりフリーズさせるためのコードの多くがスニペットとして公開されている。 そうした情報のひとつにTaranfxで公開されているHow to Crash Internet Explorer IE6, IE7, IE8, IE9がある。IE6、IE7、IE8、IE9をクラッシュさせたりフリーズさせることができるコードを紹介するという内容になっている。記事の目的はIEがクラッシュするコードを使ってほかのブラウザへユーザの目を向けさせようというもの。同様の取り組みはすで
Chromeブラウザのシェア、10％に近づく
IE6はWebサイトの間でサポート打ち切りが進むにつれてシェアが低下しており、特に企業ユーザーの間では10.3％にまで下落している。 GoogleのChromeブラウザは着実に勢力を伸ばしており、2010年11月には市場シェアが9％を超えた。分析会社NetApplicationsが報告した。 Chromeのシェアは前月の8.47％から9.26％に増えた。その一方でInternet Explorer（IE）は下降トレンドが続き、59.26％から58.44％へとわずかにシェアを落とした。Firefoxはほぼ横ばいだった。 2010年6～11月の世界ブラウザ市場シェア（％） 11月 10月 9月 8月 7月 6月 Internet Explorer
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
Webにおけるフォントと2004JISなどの諸問題について考えてみた（2010春）。 - 遠近法ノート
細かい話をすると膨大になる（というか自分の手に余る）ので、簡潔に書きます。 とりあえず今後のWeb制作の参考になればと。 結論：font-familyで和文フォント名を指定するのは、もうやめる。 そのかわりに、 font:menu;と書けば、OSのシステムフォント（menu以外にも、icon、message-box、caption、status-barがある）を指定できる。 Mac OS Xの諸問題。 ●OS X（10.5以降）のヒラギノは2系統あることに注意。 ●ブラウザで見るフォントは今でも2004JIS（の字形）になっていない。混在している。なぜか？ ●各サイトのCSSでヒラギノPro（ProNではなく）を指定している。 ●ブラウザのデフォルトにヒラギノPro（ProNではなく）が選択されている場合がある。 ●とあるテキストエディタのデフォルトもヒラギノProだったりorz ●Pro
Latest topics > 独自の文書型宣言を含めつつエラーを出さない方法（XHTML 1.1でXMLとして他の名前空間の要素を組み合わせて使いたい人向けの話） - outsider reflex
Latest topics > 独自の文書型宣言を含めつつエラーを出さない方法（XHTML 1.1でXMLとして他の名前空間の要素を組み合わせて使いたい人向けの話） 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « すべて彼女のために Main ツリー型タブのサイドバーをAll-in-One Sidebarと連携させられないの？（I want the tree of tabs to be shown in the sidebar.） » 独自の文書型宣言を含めつつエラーを出さない方法（XHTML 1.1でXMLとして他の名前空間の要素を組み合わせて使いたい人向けの話） - Mar 17, 2010 僕はXHTMLのルビ（小さな字で読み仮名をふったり
Opera Logo with CSS · David DeSandro
Opera Logo with CSS The Opera logo, rendered only with CSS, no images. Compare it with the real deal. Alas, best viewed in Firefox 3.6, Safari 4, or Chrome 5. Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers. Border Radius In all the tutorials and hubbub over CSS3, elliptical border radius is one of those features
ブラウザはUIを隠して表示領域を広く--ウェブアプリケーション時代に向けた取り組み
個人的にブラウザメーカーに感謝をささげたい。筆者のスクリーンがあまり大きくないことに気付いてくれたのだから。 筆者は、ディスプレイの有効領域で使えるものはすべて使いたいと望む1人だ。文章を書いているとき、受信ボックスをチェックしているとき、写真を編集しているとき、見られる領域が増えれば増えるほど、満足感も増し、生産性も向上する。 最大化ボタンが筆者の味方。ツールバーは敵だ。 だから、ブラウザメーカーがこの問題に新たな関心を寄せていることを伝えることができるというのはうれしいことだ。筆者にとって、この問題はウェブサイトを読む上で重要なことだが、新世代のウェブアプリケーションのためには本当に重要なことだ。ブラウザで画素が1列節約されれば、それを各ウェブベースアプリケーションで使うことができる。 Mozilla Foundationの最終的な目標は、ユーザーインターフェースを可能な限り背景に退け
JavaScriptでCSSパーサーを書くための情報を収集中(1日目) - latest log
<style type="text/css"> ... </style> CSS ファイルを一本化できればステキ。ブラウザ毎に書き分けるのって本来の姿じゃない。 CSS3 の機能を古いブラウザで使えればもっとステキ。 古いブラウザに時間を掛けたくない。CSS のバッドノウハウなんてノーサンキュー。やりたいことが表現できればそれでいい。 ブラウザに CSS の解釈を任せなきゃいいんじゃないか? まずは、JavaScript で CSSパーサーを書くための情報収集からです。 わかってること ロード済みのスタイルシートは、document.styleSheets に擬似配列として格納されています。長さは document.styleSheets.length から取得できます。 スタイルシートの各ルールは、cssRules (IE なら rules)に格納されています。 document.sty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Admiral
IE6/7/8でWebサイトの見栄えを見比べ「Microsoft Expression Web SuperPreview」NOT SUPPORTED
IE/Firefox/Safariで見た目・動作を見比べながらWebサイトを開発「Pirka'r」