タグ

プログラミングと20091203に関するpink_darkのブックマーク (9)

  • セレクタ - CSS Dencitie

    この章では、各種セレクタについて解説します。セレクタとは、その宣言をどの要素に適用するか、つまり、後に続く宣言ブロックで指定されているスタイルをどの要素に使うか、という事を決定する為のものです。 例を見てみましょう。以下のような規則集合があったとしましょう。 th { color: red } この場合、すべての th要素 の 'color' の値を red にします。つまり、すべての th要素 が赤色の文字で表示されます。この th の部分がセレクタ文字列に相当します。ここでは、そのセレクタ文字列の書き方を解説します。 CSS2では8種類のセレクタ、全称セレクタ・タイプセレクタ・子孫セレクタ・子セレクタ・隣接セレクタ・属性セレクタ・クラスセレクタ・一意セレクタがあります。 このうち属性セレクタは、更に4つに分かれます。広く見れば、クラスセレクタや一意セレクタも属性セレクタの一種と言えます

  • CSSセレクタのパフォーマンスへの影響 | warikiru

    2009-10-07 CSSセレクタのパフォーマンスへの影響 ラベル: performance ASCII.jp:30分でできる!Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ!』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ!』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん!!』 High Performance Web Site

  • CSS セレクタに関するおさらい | WWW WATCH

    CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTMLCSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説

    CSS セレクタに関するおさらい | WWW WATCH
  • http://www.favorite-labo.org/archives/243.html

  • できない→できない→妥協→できないものみたいだ→実はできる→鬱

    OperaのUserCSSイジりメモ。 やりたいこと : "_blank"以外のtarget属性が付いた変なリンクにアイコンを付けるなぜなら、既にUserCSSによって_blankを潰しているから_blankは除外するのさ。 CSSその1以下のUserCSSを書く。[target][href]:not([target="_blank"])::before{ content: url('data:image/png;base64, ... ') !important; } 結果。 <a href="aaa">targetなしリンク</a>アイコンなし<a href="aaa" target="_blank">_blankリンク</a>アイコンなし<a href="aaa" target="aaa">aaaリンク</a>アイコンありまさにやりたかった通りの挙動。 CSSその2たまにtarget

    できない→できない→妥協→できないものみたいだ→実はできる→鬱
  • これが決定版!JS+CSSでお手軽に「target= _blank」なリンクを一目で判断させる

    先日「target="_blank"」の設定されているリンクを簡単に判別できるようにする、という内容のエントリを書きました。 CSSのみで「target="_blank"」のリンクを一目で判別できるようにする これは最終的に「CSSの属性セレクタ」+「手動class設定」という形に落ち着いたんですが、予想したとおり「class設定するの面倒だよね」(意訳)という指摘が。私自身はエディタとツールを使っているのでclassを設定するのはそんなに大変でもないのですが、一般的に考えれば面倒であることは間違いありません。FirefoxやGoogle Chromeならclass設定は不要なのですが、シェアトップのIE6(7)が対応してないのではやはり意味はないでしょう。 というわけで、今度はCSSJavaScriptの両方を使って、classを設定しないでIE6(7)にも対応させ、「target="

    これが決定版!JS+CSSでお手軽に「target= _blank」なリンクを一目で判断させる
  • target="_blank"を使わずに別ウィンドウで開く|CSS HappyLife

    [an error occurred while processing this directive] 通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか? と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチスマートじゃない。 例えば下記で紹介されているような。 http://allabout.co.jp/internet/hpcreate/closeup/CU20040118A/ コレはコレで今までの問題を解決するにはいいのかなーと思うのですが、ボクが個人的に求めているのはもうちょっとスマートなやり方。 今まで、この問題に関して深く調べた事が無かったのですが、雲のむこうの人からこういう方法もあるよ。 って教わっ

  • CSSのみで「target="_blank"」のリンクを一目で判別できるようにする

    このBlogもそうなのですが、外部サイトへのリンクに「target="_blank"」を使って新しいタブ(ウィンドウ)で開く設定にしている人は多いのではないでしょうか。この「自動でタブ(ウィンドウ)を開く」という挙動には賛否両論あるものの、少なくとも私はこちらの方が好きなので利用しています。 さてこのタブを開く挙動、機能自体はいいのですが、残念なことに「一見してタブを新しく開くのか再使用するのかわからない」という欠点があります。ほとんどのブラウザの場合、target="_blank"を設定していてもデフォルト状態では見た目の違いはありません。 ところが、日では非常にマイナーなブラウザ一つのLinuxのKonquerorは、デフォルト状態でもtarget="_blank"が設定されていると一目でわかるような仕掛けが存在します。アイコンの形が変わるのです。 VM Wareで上手くスクリーンシ

    CSSのみで「target="_blank"」のリンクを一目で判別できるようにする
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • 1