A visual way to understand CSS specificity. Change the selectors or paste in your own. Specificity Calculator was built by Keegan Street. The specificity calculator JavaScript module is available on GitHub or via npm install specificity. Specificity Calculator is built for CSS Selectors Level 4. Care has been taken to ensure results are accurate. If you find a defect, please report it.
:target擬似クラスではフラグメント識別子と一致する要素に対してスタイルを当てることができる。これを利用するとCSSだけでインタラクティブにデザインを変更することが可能になる。一方History APIではページの遷移なくフラグメント識別子を含め、アクセス中のURLを書き換えることができる。では:target擬似クラスで有効になっているスタイルは、History APIでフラグメント識別子を変更した場合に動的に切り替わってくれるだろうか。 Demo: :target and history.replaceState() デモ・ページではEnable #test:targetをクリックするとURLに#testというフラグメント識別子が追加される。#test:targetセレクターを通して、文字色を緑にするようにしてあるので、クリック後文章が緑になることだろう。Disable #test:
pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。 コード例。 HTML: <section class="_foo-container"> <h1 class="title">foo</h1> <ul class="_bar-items"> <li class="item"><span class="title">item 1</span></li> <li class="item"><span class="title">item
pixivのCSSで使われるクラス名ルールという命名規則の記事を読んでいた。初見では大規模だとBEMの衝突が絶対に起きない書き方の方が優れているように思えた。しかし衝突するであろうことに警報を出すという形にゆるくすることで、開発者たちに自由を与えるというような目的でこうなっているようだ。ちょっと興味深い。 規模が大きくなると制約を厳しくして安定性を重視する一辺倒だったが、こういう自由さをうまく提供しようという考え方をすることはあまりなかった。具体的にも、変更されることがあまりない、またはわかっている人だけが行うひとまとまりのルートにのみ特殊な命名(_で始める)というのはバランスが良さそうに思える。 コードだけを見てみるとうまくいっているというのは少し驚く。_で始まるところはあまり触らない人と_で始まるところを触る人、と人的リソースが能力や職掌に応じてうまく振り分けられているのかなと想像して
pixivのCSSで使われるクラス名ルールを読んで、僕もここ最近 CSS のコンポーネント設計について似たようなことを考えていたので書いてみる。いまのところ試案で、実際のプロジェクトで実践したことはまだない。 ここでいう「コンポーネント」とは独立したスタイルのブロックの意味で、たとえばヘッダーのナビゲーションとか画像のスライダーとかブログ記事のボディとかを指す。このアプローチの狙いとしては前出の記事とほぼ同じで、これらコンポーネントの「ルート」を明確にし、コンポーネント名が衝突しないようにすること。また管理や共有を考え、特殊な命名規則や不自然なマークアップなどはなるべく避けたいというのもある。Sass などの CSS プリプロセッサーを使う前提だけど、なくてもある程度は使える。 まずマークアップでは、コンポーネントのルートとなる要素に、クラス名と同時に data-component という
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
ねこ JS Bin - Heavy Paint - http://jsbin.com/ocihek/1 勢いで試してしまって、すげぇ大雑把ですが、CSSプロパティの組み合わせと、ぬこ36要素分の.skp撮ってみた。Chromium Version 26.0.1409.0 なのでちょっと古い。 How to check out and build Skia on Mac OS X - Skia を参考にビルド。 gclient config http://skia.googlecode.com/svn/trunk gclient sync cd trunk GYP_DEFINES="skia_os=mac skia_arch_width=64" make debugger ビルド後に出現するout/Debug/debugger.appが、今回利用するSkia Debugger。 Chromi
code要素の内容には途中で折返しされない長い文字列が入ることが多い。例えばinsertAdjacentHTML()であるとか。こういった文字列が行をまたぐ時、その手前にある文字(上記スクリーンショットでは「は」の文字)まで次の行に送られることがある。これはブラウザーにより挙動が違うが、CSSで大体のブラウザーで巻き込まないように調節することができる。 Demo: Force Auto-Breaking Before/After code Element Chrome 29の場合code要素の前の「は」が次の行に送られてしまう。code要素の前に句読点やカギ括弧などが来るとそれらとその前の文字までが次の行に送られたりもするので、場合によってはとても美しくない感じになってしまう。デモを見てもあまり違いがわからない感じではあるが、もっと極端な例を考えるのが面倒だった。 code::before
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
Android 4標準ブラウザのバグっぽいのを見つけた。 overflow: autoではみ出した要素は見えないようにして その中でposition: relativeなリンクを宣言して はみ出て見えなくなっているそのリンクをタップすると、本来ならばタップできないはずなのに、貫通してタップできてしまう というバグっぽいものをAndroid 4.1.2のシミュレーターで確認した。 別の書き方(overflow: hiddenとか)でも起こるかもしれない。 Android 4.1.2以外のAndroid端末でも起こるかもしれない(Android 2.3.3シミュレーターの標準ブラウザでoverthrow.jsを使ってoverflow: auto動くようにした状態だと問題は起こらなかった)。 再現するHTML <html> <head> </head> <body> <div id="flood
Chrome 28がBetaに移った。表面上とくに違いはないだろうけれど、BlinkなChromeですよ。 さて、タイトルで言ったとおりの変更がBlinkに行われた。 144cc4f (@149832) - chromium/blink — Include scrollbar size in @media width/height M28に入るかなと思って試したんだけど、そう動かなかったのでこれはM29からになりそう。Stableまでは3ヶ月ほど猶予があるから、入らなくてよかったかも。 ええと、どういうことかというと、もし、 RWDなどメディアクエリーを使うサイトを作っていて クエリで width (あるいは height) を使っていて ChromeもしくはSafariをメインに作っていて そのサイトをFirefox, Opera, IEでテストしていない という場合、ブレークポイント前
Hondatoto Togel - Agen Judi Toto Terpercaya Mode Togel 2D Seratus Ribu Kecerdasan dalam memprediksi dapat dikonversikan menjadi penghasilan tambahan, terutama apabila yang ditebak adalah angka-angka. Di dalam pelaksanaannya, kreatifitas tersebut juga mesti dibarengi dengan kepandaian dalam mengatur budget permainan. Permainan yang kami maksud adalah togel yang kini banyak diselenggarakan oleh situ
"The best driver WIKI ever! I wil keep coming back for sure."Eric Smalter, Boston, MA Our main support OS are: Windows 7, Windows 7 64 bit, Windows 7 32 bit, Windows 10, Windows 10 64 bit, Windows 10 32 bit, and Windows 8. Most Popular Drivers for 2022We have been receiving a lot of driver updates this year, and many of our users have been asking what drivers should be their top priority for insta
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
