CSS

要素の表示/非表示をトグルするベストプラクティス

[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference を読んで、display = "block" はアカンやろ、と思ったので書いておく。 <div id="foo"> <p>FOO</p> </div> div#foo を JavaScript から表示/非表示をするには。 ダメパターン func…

Note 的な aside 要素をネガティブマージンを使わずに

こんな感じの、NOTE部分は ::before 等のCSSで書き、回り込みなしのブロックを作るやり方を模索してた。 ネガティブマージン まぁ楽ではある aside.note { padding-left: 6em; } aside.note::before { content: "NOTE"; margin-left: -5em; float: left; } <aside class="note"> <p></p></aside>…

flexible ボックスメモ

CSS

Firefox 18.0a(Nightly) で CSS Flexible Box Layout Module が実装されつつある。 その辺りは、FirefoxのFlexbox実装、進行中 - fragmentary 辺りを参照ってことで。まぁともかく、about:config の値 layout.css.flexbox.enabled を true にすれば、少し試…

:(コロン)を含む id や class のセレクタ

CSS

発端は、document.querySelector("#hoge:piyo")などと id が "hoge:piyo" の要素を取ってこようとした時。これをやると SyntaxError: An invalid or illegal string was specifiedみたいな例外が発生する。 XMLのID値の定義 HTML 4.01 のID値の定義 を見ても…

-webkit-border-radius なんて書いているWeb開発者は腹を切って死ぬべきである

CSS

地獄の火の中に投げ込むものである。いや、まあそんなネタはどうでも良くて... そのベンダー接頭辞はいつまで書くの? | Unformed Building 書いてあることは至極真っ当なこと。もろ手をあげて賛成である。また、 ベンダー拡張プリフィックスはそれそのもの…

overflow: auto 便利

CSS

昨日知ったCSS tips。 window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/w…

【お願い】background-colorを指定してください

CSS

文字列を選択した時の挙動というかハイライト周りについて。 ブラウザ毎に挙動が違って面白いというか迷惑。id:FTTH さんが画像がないとは何事だ。とコメントをくれたのでキャプチャしたよ。これでOK? 上下で背景が黒、白で分けて、それぞれに記述のスタイル…

Panoのサイドバーをタブバーっぽくする

Pano(https://github.com/teramako/Pano)っていうFirefoxのタブをツリーにして表示する拡張を作っている。 サイドバーに表示する形式のものは、こんな感じ ちょっと寂しいのでuserChrome.cssでスタイルを書いてみた。こうなる(Stylishでも同じことができるは…

userChrome.css でパノラマの背景を設定する

こんなことをしてみている。 画像はキャンドル&スノーハウス(2010年12月カレンダー) 壁紙 -壁紙.com-から拝借。 @charet "utf-8"; @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w…

タブ周りのCSSとか

Firefox2の頃はあまり弄らなかったタブ周りをFirefox3になって弄りだした。正直やり難い。まず、タブ要素の属性についているmaxwidth,minwidth,widthのせいでCSSが効かない。仕方ないので.vimperatorrcに javascript <

Firefox3b4 バー周りのuserChrome.css

FirefoxのデフォルトのCSSではちょっと間が空きすぎだと感じているのでuserChrome.cssを弄った。 左がデフォルトで右が弄った結果。 主に以下のような事をしている ブックマークツールバー アイコンのあるものはアイコンのみに(テキスト非表示) フォルダは…

CSSハックなんて全部捨てちまえ!

CSS

件名の通り。TRANS [hatena] - IEハックなんて全部捨てちまえ!のパクリである。しかも冒頭のみ。 みんながCSSハックを嫌っていることをそろそろ認めようよ。僕たちのCSSのデバッグの約80%の時間がCSSハックのために費やされている。みんな知っていると思う…

CSS Naked Day らしい

CSS

CSS Naked Day CSS裸日2007 - 徒書 CSS Naked Day - えむもじら Taken SPC : CSS Naked Day 2007 Latest topics > CSS Naked Day 2007 - outsider reflex デフォルトCSSがある限り、完全にoffにする事は出来ないわけだが。デフォルトスタイルすらなくなると…

content プロパティは要素は生成しない...はず

CSS

CSS 2.1のエッセンス - 脱初心者をめざす人のためのホームページ作成講座 ホットエントリから発掘。綺麗なページで読み易く、かなり仕様に忠実な感じ。真面目に仕様[w3.org]を読んでいないオイラには有難い。詳細度あたりのカスケーディングの細かいルールは…

タイトルのカテゴリをアイコン化

hoge { font-size: 0; } とするとFirefoxではテキストが消える事を発見。IE6では豆粒のような文字になるが...*1。面白いのでセクションのカテゴリをアイコン化してみた。 a.sectioncategory[href$="hoge%5d"] { font-size:0; } a.sectioncategory[href$="hog…

userChrome.css でブックマークツールバーフォルダをスマートに その2

前回のものを改良(?)した。 フォルダの場合はアイコンを非表示でテキスト表示*1 *2 テキストだけだと詰まり過ぎてちょっと見難いのでpaddingを付加 アイテムの場合はテキスト非表示 ブックマークレットの場合、ツールチップにURLが表示されて冗長なので非表…

userChrome.css でブックマークツールバーフォルダをスマートに

Firefoxのブックマークバーをアイコンでスマートにする機能拡張「Smart Bookmarks Bar」 おぉこれは良いアイデア。ただ、アイコンがあるページなら良いが、無い場合何のサイトか分からなくなる罠。アイコンが設定されていないものにはラベルを表示させておき…

Base64エンコードした背景画像が...

background: white url('data:image/png;base64, ......'); とかやると background: white url("");base64, .... '); となってしまう。mime-type後の;がいけないのかな。とにかくダメみたいだ。画像をフォトライフにアップするのが面倒だったら、わざわざエ…

HTML,CSSは所詮補助

「俺が教えてやろう」という方がおられましたら是非に。という気概はないですが、しばらく考えた後の私なりの回答を書いて見ます。高枝かれんさん自身の考え次第だと思います。 単に「ひぐらしのなく頃に」というタイトルを記述するだけならマークアップしま…

シンプル志向

CSS

やっと外観が整ってきた。調整は必要だろうけど大方は終わり。「ちょっおまっ...」と思われるかもしれないがオイラとしてはこれで十分。というか、これ以上複雑になると管理が面倒。 一応現時点での設定を載せておくよ。 ページヘッダ <div id="main"> ページフッタ </div> <div id="sidebar"> <div class="item"> <hatena name="profile"> </div> <div class="item"> <hatena name="section" moduletitle="最近の記事" template="hatena-module"> </hatena></div></div>…