サブセクションにあるh1要素のフォントサイズ
全然知らなかったのですが、Chrome 15やFirefox 8ではベンダー拡張プリフィックス付きの:any擬似クラスを使ってサブセクションのh1要素のフォントサイズを調節するようになっているようです。Internet Explorer 9も見た感じそうなっているようですが、UAスタイルシートによるものなのかよくわかりません……。なんか変なことやってそう(偏見)。 Chrome 15の場合は、 h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } :-webkit-any(article,aside,nav,s
現行CSS3 Rubyの問題点（Bugzilla Bug 256274より） - 血統の森+はてな
id:Rockridgeさまにid:momdo:20090214:p1にてコメントをいただいたので、Bug 256274 - Implement CSS ruby moduleについてちょっと読み込んでみたところ、Mozilla Japanの中野氏がコメントを付けてたので拾ってみる。以下果てしなく怪しい意訳。 ------- Comment #7 From Masayuki Nakano (Mozilla Japan) 2008-05-21 08:19:55 PDT ------- I hope this will be fixed on Gecko2.0 (or Gecko1.9.x if possible). For that I'm thinking the implementation. However, the current spec (http://www.w3.org/TR
白抜き文字をtext-shadowで
CSSで文字のアウトラインを描く方法を考えていて、text-shadowプロパティを使って強引に描いてみました。WebKit系で可能な-webkit-text-storkeと-webkit-text-fill-colorプロパティによるものと比べて二重にできるとか多色展開も簡単とかが利点でしょうか。CSS-Trickで一年以上前に話題になってました……。 Demo: Outline Text with text-shdow 二重を例にとると .double { text-shadow: -1px -1px black, 1px -1px black, 1px 1px black, -1px 1px black, -2px -2px white, 2px -2px white, 2px 2px white, -2px 2px white, -3px -3px black, 3px -3px
SVGのフィード・アイコン
背景を完全に透明にして白い丸と円弧の部分だけのフィード・アイコンを作ってみました(上の画像は背景がオレンジ色になっていますが、CSSで背景色を指定しているだけです)。Wikimedia CommonsにあるSVGアイコンをエディタでいじっただけですけどね。SVGファイルのソースにコメントとして書いてあるように元ファイルと同じくMPL/GPL/LGPLのトリプル・ライセンスです。 Demo: SVG Feed Icon SVGファイルのソースはデモ・ページの最後に載せてあるのでそれをHTMLファイルにコピペしても良いですし、普通にドラッグ・アンド・ドロップや右クリックで保存してimg要素で参照しても良いでしょう。このページやデモ・ページではData URIスキーム化したものを直接使っています。500バイト強の小さなものなのでData URIスキーム化して使うのが良いと思います。 アイコンの丸
Rules
Parsing errors should be fixed The most important rule, as far as CSS Lint is concerned, is to ensure there are no parsing errors in the CSS. Parsing errors usually mean you mistyped a character and caused the code to become invalid CSS. These errors may cause the browser to drop a property or an entire rule. Parsing errors are always presented as errors by CSSLint, the most important issues to fi
CSS Lint
CSS Lintをしばらく使っていますが、さすがにLintと名乗るだけあって手厳しいですね。効率的でキレイなCSSを書くために自然とHTMLの見直しをすることになる感じが、過渡期の今にはなかなか良いツールな気がします。W3C CSS 検証サービスのCSS3対応がいまいち(border-radius: 4px / 8px;が正しい演算子ではありませんとか怒られたりとか)なこともありますし、もっとみんな使うと良いと思います！ ストレスたまる気がしますけどね！ このサイトのCSSだと、 セレクタでID使うな widthやheightとpaddingやborderの併用はするな !importantは使うな この辺りで引っかかります。「承知でやってるよ！」とか言いたくなりますけど、そこはぐっと我慢。 気になるのはDisallow qualified headingsという、見出し(h1-h6)要素
覚え書き@kazuhi.to: font-size: 0; には気をつけて
font-size: 0; には気をつけて 一発ネタ（ネタ？）というか、それまで知らなかったので覚え書き。先日出席した2011年度第10回ウェブアクセシビリティ基盤委員会WG2で、塩尻市公式ホームページが話題に。というのも、アクセシビリティに配慮したホームページということで、 リニューアルし公開したホームページでは、総務省「みんなの公共サイト運用モデル改定版（2010年度）」に基づき、「JIS X 8341-3:2010」達成等級AAに準拠しました。 ……だそうです。話題になったポイントはそこではなく、Google Chromeでは一部のリンクにタブキーでフォーカスを与えることができないという点。具体的には、リンクがul要素でもってリストとして複数並べられている箇所でその事象が確認されており、たとえばヘッダーにある「音声読み上げ・文字拡大」「English」といったリンクラベルが並んでいる
CSSセレクタによる高速化、実際のところ « NAVER Engineers' Blog
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実施可能なCSSとHTMLのみでの高速化の手法とそれを実施する上で注意すべきポイントについて見てみたいと思います。 高速化のテクニックと、コーディング時のコスト CSSのセレクタは、body .contents .header span aというように、左から右により詳細になっていくように指定するかたちが一般的です。 しかしブラウザはこれとは逆に、右から左にセレクタを解釈しながら描画していきます。 そのため、より負荷のすくないCSSを書くために、 スタイルを当てる要素にはできるだけclass又はIDを指定する 子孫セレクタは重いので、
【お願い】background-colorを指定してください - hogehoge @teramako
文字列を選択した時の挙動というかハイライト周りについて。 ブラウザ毎に挙動が違って面白いというか迷惑。 id:FTTH さんが画像がないとは何事だ。とコメントをくれたのでキャプチャしたよ。これでOK? 上下で背景が黒、白で分けて、それぞれに記述のスタイルを割り当てている。 divに背景色：黒、文字色：白 none: スタイルなし 背景色：画像で白、文字色：黒 背景色：白、文字色：黒 divに背景色：白、文字色：黒 none: スタイルなし 背景色：画像で黒、文字色：白 背景色：黒、文字色：白 Firefoxの場合 背景色によってハイライトが変わる。一番見やすい。 白地の場合 背景色：青、文字色：白 黒字の場合 背景色：白、文字色：青 GoogleChromeの場合 常に背景色：青、文字色：白 黒字の背景色が指定されていると、ハイライトされているか分かりにくかったりする。 そして、複数行選択
3.2. Determining the Subject of a Selector - Selectors Level 4
Selectors Level 4 Editor’s Draft, 24 January 2024 More details about this document This version: https://drafts.csswg.org/selectors/ Latest published version: https://www.w3.org/TR/selectors-4/ Previous Versions: https://www.w3.org/TR/2022/WD-selectors-4-20220507/ https://www.w3.org/TR/2018/WD-selectors-4-20181121/ https://www.w3.org/TR/2018/WD-selectors-4-20180202/ https://www.w3.org/TR/2018/WD-s
Mojolicious hack of the day: CSS4 - Sebastian Riedel about Perl and the Web
Sooner or later most web developers stumble over one not so insignificant weakness of CSS3 selectors, you can't select parent elements. So while you can select img elements with an a parent, you can't select a elements with an img child. But this has recently been solved in a very clever way with the latest CSS4 working draft, where you can just change the subject of a selector by prepending a dol
線を引け
早速宣伝をしようっと。金曜に発売されたWeb Designing vol. 116にものを書きました。というか連載だから、毎月書いてるんですが。 今月はえーと、Regressive Enhancementについてです。Progressive Enhancementではなくてregressive。Graceful Degradationに近い部分もあるけど、ちょっと違う。違いについて書いたかどうかは覚えてないけれど、とりあえずREについて書きました。 それで、Progressive Enhancementについて思うこと。「ベースラインを引くこと」がPEのキモなんだけど、それがあまり伝わっていない。「HTML5とかCSS3を使うときに、対応してない環境ではちょっと物足りないかもしれないけど、情報は伝わるよね」なんていう説明で紹介されることがあるけれど、どちらかというとそれはGraceful
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
hamashun me : Windows PC に Ruby と Sass を導入する方法
Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語（って言い方でいいのかな）であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。 Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC（XPとVistaで試しました）にSassを導入する手順を紹介します。 Rubyのインストール SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。 インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。 ruby -v ruby 1.9 1p430(2010-08-16 revision 28998) みたいのが出たらgemのアップデートに進
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
textarea のリサイズ機能を止めてみる
Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。 なので、止める方法を。 CSS3にそれっぽいプロパティが有るので、1行書くだけです。 textarea { resize: none; } こんな感じですね。 これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。 これだけだと、寂しいのでエントリーっぽくするために。 textarea以外に使うとしたら、トップページの新着情報みたいなので時々見る、高さ固定して overflow: auto; とかでスクロールバー出してる場合とかに使っていけばユーザー側でリサイ
text-overflowの仕様が複雑になってる話
Life with Web Browser Engine (Gecko, WebKit and etc), Mobile and etc. Firefox (7ね) でもtext-overflow: ellipsisが実装されたわけだけど、text-overflowのスペックがcss-uiに移った関係上、Tantekがいろいろなことを細かく追加してくれてる。それらの話は勝手にTantekが書いたわけではなくて、いくつかの議論が過去にあったことをちゃんと反映したということが事実でもある。 でさ、IE9が出たときに一番感心した点でこのtext-overflowの実装がちゃんと最新の話を追従してきてたというところ。最新の仕様でちゃんと定義されたものの一つとして、スクロール時の動作ってのがあるんだ。 <div style="width: 5em; text-overflow: ellipsis;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS4セレクタ (Selectors Level 4) の新機能
css-eblog.com
https://css1k.com/
