`option` 要素が `disabled` しないブラウザの話
CSS昔話 Advent Calendar 2015(www.adventar.org)の20日目の記事です。 あるとき Amazon で Kindle コミックを購入しようとして、「配信先」のプルダウンがおかしなことに気付きました。5種類登録されているうち、ひとつだけ選択できない項目があるのですが、なぜかフォントが太字だったり、文字の開始位置が少しずれているのです。 Kindle 本の「配信先」プルダウンを Chrome で表示したところオリジナル画像 HTMLソースコードを見て納得。選択できない項目は <option disabled> ではなく <optgroup label=""> を使っていたのです。簡略化するとこんな感じに。 <select> <option selected="">選択肢1</option> <option>選択肢2</option> <optgroup la
IE6で透過PNGを利用するためのTIPS
IE6で透過PNGを利用するためのTIPS 本エントリーは「CSS 昔話 Advent Calendar 2015」16日目のエントリーです。 昔話となってますが2年ぐらい前に対応した記憶があるのでわりと最近の話ですね。 IE6は10年以上も一緒に過ごしたブラウザであり憎悪を通り越して非常に愛おしブラウザになっております。 いちばんお茶目だなと感じるのは透過PNGのアルファチャンネルが上手に表示できないこと。ほんとに可愛いやつ。 透過PNGをIE6で利用するために使われた有名なライブラリが「DD_belatedPNG」です。また、わたしがつくった「alphafilter.js」も多くの方にご利用いただきました。 そこで今回の昔話ではこれらのライブラリがどのような原理で透過PNGを表示していたか解説を行います。実はこれらのライブラリは全く異なるアプローチでIE6対応を行なっております。 Al
IE6 でも display: inline-block; を使いたかった僕たちは
これは「CSS 昔話 Advent Calendar 2015」14日目の記事です。 13日目は(´°ム°`)さんの「昔はマウスオーバーで突如おかしくなることがあった君（IE6）」です。 CSS 昔話というキーワードに脊椎反射で飛びついて登録しましたが、ブラウザと戯れることになったので IE6 の時代からなので、昔話と言えるのかどうか怪しいです。 世界観は IE6 の全盛期、まだ IE7 が生まれていない頃です。 さて、表題の件、IE6 でも display: inline-block; を使いたかった僕たちはどうしたか……。 display: inline-block; が使えなかった IE6「flexboxしかしらない若者」というのが実際に存在するのか定かではありませんが、仮に「爆発して欲しいブラウザ」というランキングがあれば間違いなく No.1 を取るであろう IE6 こと Inte
みんな大好き spacer.gif
1x1.gif should have won a fucking Grammy. Or a Pulitzer. Or Most Improved, Third Grade Gym Class or something. Zach Holman - Only 90s Web Developers Remember This spacer.gif、それは 1px × 1px の透過gifを width と height で制御することにより、隙間を希望通りに変更してレイアウトを制御しようとするハックである。 要するに margin や padding の替わりである。 詳細な使い方はググれば山程出てくるはずなので、そちらを参考にされたい。 「なぜcssを使わないのか」「なぜpngじゃないのか」といった質問がある若者は近くのおじさんに聞きなさい。 あの頃の若者は文書の構造と体裁の分離だのセマン
Post by @geckotang
そう、32767pxといえば、2007年頃に広まった要素の高さをそろえるテクニック（？）の中に登場する数値ですね。
Universal IE6 CSS
昔々あるところに、 Universal Internet Explorer 6 CSSというのがおったそうな。 …Universal IE6 CSSについては知らないひとも多いかもしれない。 CSSを学び、少しテクニカルなことをしはじめたころに憧れていた人物にAndy Clarkeという人がいる。 彼はStuff and Nonsenseというデザインコンサルティング会社に勤めており、イギリス人らしくモッズなスタイルのWebデザイナーだ。実務では政府の仕事をやっていたり、それ以外の活動としては、Web標準、HTML5、CSS3の黎明期にモダンなCSSデザインアプローチの書籍を出版・講演活動と広げてきた人物だ。 2008年くらいに「クロスブラウザ対応」という言葉が流行り、あわせてProgressive Enhancement/Graceful Degradationというようなアプローチが浸
PSDファイルのレイヤー名でBEM - dskd
公開日2013-12-26タグAdvent CalendarBEMBEM Advent Calendar 2013 24 日目のエントリです。 BEM はセレクタの命名規則だけでなく、ファイルシステムの管理にも導入できますよという bem.info のページを見ていて、MindBEMding な名前付けは何もウェブだけのものに留まらなくていいんじゃないかと思うようになりました。そこでタイトルにあるように、PSD ファイルのレイヤー名で BEM です。 何回か前の記事で紹介したこちらの画像の、 PSD ファイルをこんな感じにしてみました。 冗長になるので Block と Element の継承は省略して Modifier を書いています。レイヤー名で BEM と言いましたが、このような単純なイラストでもレイヤー単位では HTML 化できないところが出てくるので、グループにしてそこで BEM
BEMまとめ奴 - dskd
公開日2013-12-26タグAdvent CalendarBEMBEM Advent Calendar 2013 最終日のエントリです。 BEM Advent Calendar 2013 に参加していただいた皆さんお疲れ様でした。そしてありがとうございました。 リニューアルした Adventar で最初にカレンダーを登録した時にボックスのヘッダーカラーがアレな黄土色だった時はどうしてくれようかと思いましたし、開始４日前で 18 枠も開いていたりとか、TL では BEM への闇が広がっていたりとかもしていましたが、なんとか 25 日埋めることができました。カレンダーに参加していない方にも BEM の記事を書いていただいたりと、せまい範囲ながら BEM に触れる機会を提供できたのかなと思えています。 最終日 25 日目の本記事では、BEM Advent Calendar 2013 に寄せてい
BEMのロゴが個性的で面白い - dskd
公開日2013-12-25タグAdvent CalendarBEMBEM Advent Calendar 2013 23 日目のエントリです。初日から日をまたいで公開しているので今さら日付通りに書けなくてもなんの罪悪感もありません。本当にすみませんでした。 突然ですが、BEM にロゴがあることをみなさんご存知でしたか？ bem.infoのトップページにロゴが載っているのですが、何種類かのロゴがリロードするたびに変わります。今回はそのロゴをざざっとご紹介しようと思います。 なんなんですかね、このセンス。面白いです。 僕が 100 回くらいリロードして出てきたロゴはこれが全部でした。もしかしたらまだ他にもあるかもしれません。その時は@o_tiまで教えていただければと思います。 もしかして公式ロゴって存在してない？ 上記でご覧頂いたように、BEM のロゴってだいぶ自由です。なので、僕も BEM
未来のCSSプロパティのために
(Photo by sada_h) この記事は CSS Property Advent Calendar 2013 18日目のエントリです。 今回はCSSのテストについて書きます。 仕様と実装 CSSの仕様はW3Cによって策定が進められ、その仕様を元にブラウザベンダが実装を行います。 仕様がどうあれ、CSSのプロパティがどういった風に振る舞うかを決めるのはブラウザの実装次第です。 「同じスタイルを当ててるのにブラウザによって表示が違う…」なんて経験をしたことはありませんか？ 各ブラウザにCSSが正しく実装されるには、その仕様に対してのテストケースが必要です。仕様とそのテストケースを元に実装が行われれば、どのブラウザでも同じ様に表示されることが期待できるようになります。 仕様が勧告に至るにはテストケースをパスする必要があります。テストがなければいつまで経っても勧告に至りません。 CSSの仕様
CSSアニメーション一発芸 - ほとラボ
CSS Property Advent Calendar 19日目のエントリ。 最近自分の中でホットなCSSアニメーションについて。 なぜCSSアニメーションか jQuery.animateでもアニメーションは出来るのに、わざわざCSSでやる理由は何か？ という内容で書こうと思っていたのだけど、11日目の Toshimaru さんのエントリと内容が丸被りしてしまった。 しかも俺の書く拙い文章よりもはるかに詳しくわかりやすく書かれていて申し分無い。 つまり俺はお呼びでないというわけだ。 仕方がないので、一発芸します。 CSSアニメーション一発芸 Snowfall!! クリックすると雪が降るよ。 JavaScript不使用 PCは Firefox, Chrome, Safari で動作確認済 スマホは未確認 雪にマウスオーバーすると・・・？ ソースコードはこちら おまけ 作ったはいいけど没にな
CSSカスタムプロパティとMythの話 | inkdesign
CSS Custom Properties for Cascading Variables ModuleはCSSで変数を使うために、その変数を定義するためのプロパティについての仕様だ。 これが先日Firefox Nightly 29で実装されたらしく、ちょっとお触りしてみた。これについては同じようにお触りされた記事、Playing around with CSS variables - "custom properties"が良かったのでこっちも参照するのをおすすめする。 基本的な使い方 CSSで変数というと、SassやLESSなどのプリプロセッサとして使うことができ、そのあたりで使ったことがあるのであれば、CSSerの人でもなんとなく馴染みやすい仕様かもしれない。とはいえ定義とその参照方法はSassやLESSのそれとは全然異なる。 /* 変数を定義する。 `var-`の後が参照する時のキ
BootstrapをBEMに考えてみる - Blog.おにぎりたまごうぃんなー
この記事はBEM Advent Calendar 2013の22日目の記事です。 こちらの記事を読んで、初めてBEMを知りました。 BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号 ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。 とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。 よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Post by @geckotang
とあるブラウザの text-align 力がちょっと過剰だった時代のお話。 | blog.xicolotic
Post by @kojika17
Post by @geckotang
Amazon.co.jp: JavaScript Alphabetical Advent Calendar 2013: 及川恒: Digital Ebook Purchas
APCOM - Home
【HTMLとCSSの基礎の基礎講座】その24：番外編！border-radiusを愛でる会 - のはこごと