公開日2013-12-04タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ４日目のエントリです。 昨日、げこたんさんに BEM Advent Calendar を手伝ってもらったら、 おや？プロパティの方に恩返しがありませんね？ — げこたん (@GeckoTang) 2013, 12月 2 と言われてしまったので２回目を登録しました。 要件 「データがある時はリンクを出したい」などのニーズで内包要素の数がページによって増えたり減ったりすること、けっこうありますよね。それが普通のテキストリンクではなくタブだとかサムネだとかでレイアウトにも関わるとき、要素の数によってスタイルを切り分けなきゃいけないわけですが、タブが２つの時には .tabs2。５つの時には .tabs5 とかいちいちクラス付与させるのも面倒くさいわけです。 どういう
連載目次 従来、JavaScriptでは、以下のようなメソッドを利用して、操作対象の要素を特定していた。 getElementByIdメソッド：IDの値をキーにノードを取得する。 getElementsByTagNameメソッド：要素名をキーにノードを取得する。 getElementsByClassNameメソッド：class属性の値をキーにノードを取得する。 しかし、この方法で複雑な構造のHTML文書から要素を取り出す場合、コードが複雑になりやすいという課題もあった。例えば、以下は従来のgetElementXxxxxメソッドを利用した要素の取得例だ。 上記のJavaScriptコードでは、奇数番目の要素を特定するために全てのインデックス番号をif文で判定させている。ほかにも属性値やclass属性によって要素を絞り込むならば、同じような判定式を書いた経験が読者諸氏にもあるだろう。「もっと簡
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
Last major update on 18 June 2009. This series of compatibility tests is sponsored by Vodafone. Desktop table. My CSS tests, but now on mobile phones. If you want the latest inside scoops on my mobile tests, follow me on Twitter. See also the general remarks on the main table. CSS 2.1 selectors Can’t really test SEK770i because it doesn’t provide visual feedback in the table below; I can’t see whi
SelectorGadget is an open source tool that makes CSS selector generation and discovery on complicated sites a breeze. Just install the Chrome Extension or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then g
IE8 CSS Selector Support IE8 Supports the CSS2.1 selectors, including pseudoclasses but not pseudo elements. (See Double Colon Notation). IE8 has support for has support for Accessible Rich Internet Applications (ARIA) To force IE8 to render your page in IE8 compliance mode, include the following meta tag: <meta http-equiv="X-UA-Compatible" content="IE=8" /> IE7 within IE8 CSS Selector Support The
低速復活中なので、kQueryを細々と書き直しました。 http://kquery.if.land.to/slickspeed2/system/kquery.js URLからもわかるように大好きなSlickSpeedも置いておきました。 http://kquery.if.land.to/slickspeed2/ http://kquery.if.land.to/slickspeed2/slickspeed2.zip 広告入るスペースなので、zipに固めたものも置いておきます。 基本的に速度向上ではなくて、内部的なリファクタリングがメインなので、劇的に速度が向上したりはしていません。まぁ、少しは向上していますがｗ 今回の改造は、 親ノードを配列で複数渡せるように。 大抵のセレクタ実装だと一つの親しか渡せないけど、find関数を実装することを考えると複数取れた方が都合がいいよね？ ID、クラス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く