CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる
CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。 Limit the reach of your selectors with the CSS @scope at-rule by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 CSSのセレクタを記述するきめ細やかな技術 CSSの@scopeとは :scope疑似クラスとは @scope
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
理想のCSSスキンのかたちを求めて - 3ping.org
2007.12-30 Ninja Style 完成。(年内に間に合った!) 問題の修正とか、アイコンがついたりいろいろ変わっているので、新しいものを使ってください。 表示確認 Download: Ninja Style 2007.12-27 当初配布していた暫定版のNinjaスキンに１箇所すんごい不具合がありました。 ボックスの高さを揃えるテクニックには、落とし穴があったようです。その不具合の表示と、原因を記事末尾に追記しましたので参照してください。 このテクニックを利用する際は皆様も注意してください。解決方法も模索しています。 僕が考える理想のCSSスキンとは、以下の条件を満たすものです。 ユーザーが好みの形に変えやすい CSSに詳しくなくても1.が可能 適当に編集してもレイアウトが崩れにくい 少しの調整でイメージを大きく変えられる ユーザーのカスタマイズ意欲を掻き立てる 現在のVic
[CSS]スクリプト無しで実装するドロップダウンメニュー -Skeleton dropdown menu
Skeleton dropdown menuは、スクリプト無しで実装するCSSのドロップダウンメニューです。
hasLayoutプロパティがtrueで発生するバグ - Webtech Walker
hasLayoutがfalseのときに起こるバグは多数ありますがここでは触れません。hasLayoutプロパティをtrueにするにはwidthやheightを指定する方法の他に、IE独自実装の「zoom」を使うことも多いです。下記のように「zoom:1」と指定すれば、他のレイアウトに害が少ないからです。 div#foo { zoom: 1; } ただし、この「zoom」はW3CのCSSバリデータでエラーになるのでそれが嫌な人は使わないほうがいいかもです。 hasLayoutプロパティがtrueのときの問題点 では本題です。hasLayoutプロパティがtrueのときに、以下のようなバグが発生します。 IEでリストマーカーが壊れる IE7のズーム機能で拡大、縮小した際に文字が重なる IEでリストマーカーが壊れる これはul,ol,liのhasLayoutがtrueだとリストマーカーが壊れます
CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo
2008-03-06 追記: jQuery無しで動くように修正しました あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。（要jQuery。要素の取得で楽してコードを短くするために使っています） CSSをクエリーで切り替えるJavaScript 動作サンプルページ (function(){ //クエリーにstylesheetがあれば切り替え関数呼び出し if(location.search.match(/\bstylesheet=([\w]+)/)){ var titleValue = RegExp.$1; changeStyle(titleValue); } // CSS切り替え関数 // 引数titleValueと一致したtitle属性を持つlink要素を有効にする
私の出会ったバグ達 - ブラウザ依存 - AUSGANG SOFT
最近、Javascriptで開発していて、ブラウザ依存のバグに出会うことが多いので、実例をメモ。 原因と対策は、リンク先を参照されたし。 ifreame上のinput、textareaからキャレットが消えるバグ Windows版Firefoxで発症。 実例 ↑の場合は、背景のオーバレイDIVを消したら、治った。 Bug 226933 - Caret vanishes in input form elements over iframe - lambda {|diary| lambda { diary += 1 } }.call(hatena) http://d.hatena.ne.jp/winebarrel/20070814/p1 透明のオーバレイDIVを表示すると勝手にFlashが消えるバグ Mac版Firefoxのみ発症。 透明度が関連するので、DIVのフェードイン、フェードアウトのエ
Designing For Every Browser: How To Make Your Site Fully Cross Browser Compatible – Design Vitality
What consumers see as freedom of choice when choosing a browser, coders can sometimes see as a nightmare. Here’s a quick list of popular browsers, just off the top of my head: Google Chrome (Latest, and older desktop versions)Google Chrome (mobile for iOS and Android)Firefox Version 65.0Firefox (Older desktop versions)Firefox for iOSFirefox Focus for Android Internet Explorer 9 and olderInternet E
スタイルシートをめぐる冒険: inline-blockの奇妙な世界
inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;
[CSS]高さの異なるカラムを揃えるスタイルシート | コリス
Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
alt属性はいかに決定されるべきか | Takazudo Clipping*
画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt！と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」:phpspot開発日誌
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」 2007年10月03日- Website Performance | CSS Sprite Generator 複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」。 GoogleはHTTPコネクションを減らすため、画像は一枚で出力しています（参照）。 同じことをやろうとすると結構面倒ですが、複数の画像をZIP圧縮してアップロードするだけで、画像の結合＆CSS出力を行ってくれるサービスが登場しました。 使い方は簡単。画像ファイルをZIPでまとめて圧縮後、アップロードします。 positionに関するCSSが出力されています。 ページ下部には画像を表示したい位置に「background: url〜
ウノウラボ Unoh Labs: hasLayoutとは何か
yamaokaです。 CSSに携わっている方なら、Holly hackを使ったことがあるかもしれません。 /* Hides from IE5-Mac \*/ * html .foo { height: 1%; } /* */ Internet Explorer（以下IE）で、レイアウトに問題のある要素に 上記のようなスタイルを指定をすると、 あら不思議、まともな表示がなされるというものです （上記のままではIE7に対応していませんが…）。 さて、どうしてレイアウトが意図したとおりに行われるようになるのでしょうか。 IEのhasLayoutプロパティ IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティを持っています。 これはそれぞれの要素がレイアウト情報（＝要素の幅・高さなどに関する属性情報）を 保持しているかどうかを示す値で、 デフォルトの状態では「hasLayo
RedLine Magazine : 変な定義リストをスッキリさせたい
変な定義リストをスッキリさせたい 随分前の話になるんだけど、別の制作会社のスタッフがコーディングしたコンテンツの中でdl（定義リスト）が使われてる部分があった。意味的にその場面で定義リストを使うのは間違いじゃないと思うし、それは問題ないんだけれど、少しソースに違和感があった。今日はそれを書いてみる。 何に違和感があったのか 私が違和感を感じたのはこういうソース。（内容は架空のものに差し替えてます） <dl> <dt>開催日時</dt> <dd>2007年8月18日</dd> </dl> <dl> <dt>開催場所</dt> <dd>日本のどこかの県のどこかの市</dd> </dl> <dl> <dt>参加費用</dt> <dd>1,000円くらい</dd> </dl> 何が違和感かって、定義リストで同じグループのものって普通1つのdlの中にdtとddを並べれば済むんじゃないの？と。そのマー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
はてなブログ | 無料ブログを作成しよう
http://hpbuilder.net/weblog/2007/10/08071505.html
Styled Text Area by CSS-Tricks