!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
ハタさんのブログ : CSSの指定順序による同一プロパティの上書きと優先順序
全然知らなかったことなのですが、複数のCSSを指定して同一のプロパティを指定してしまうとブラウザはどう表現するのかってやつをやってみた。 styleとclassを定義する 有名どころで、styleとclassだったらstyleで指定したものが勝つよ。ってやつ <html> <head> <style> .hoge { background-color: blue; } </style> </head> <body> <div style="background-color: yellow" class="hoge"> <p>hello</p> </div> </body> </html> 上の場合は、styleで定義したyellowが背景色として使用されます。 また、idについてもstyleで指定したものが優先されます。 <html> <head> <style> #hoge { back
Opera News
AI New AI Feature Drop: Ask Aria & Aria Voice to boost your browsing on the... March 12th, 2024 We're excited to introduce Ask Aria and Aria Voice as a part of our new AI Feature Drops initiative. Opera for Android, Opera for iOS Starting on March 6, nearly 400M Europeans will get to choose their default browser on... March 6th, 2024 We're excited for March 6th, when hundreds of millions of Androi
Greasemonkey スクリプトは安全ではありません
■ Greasemonkey スクリプトは安全ではありません Webアプリケーションセキュリティフォーラム の奥さんと高木先生のバトルより。 高木先生 ええと、「クッキーが漏洩する程度なので問題ない」と聞こえたような気がしたんですが。 Greasemonkey には超絶便利な GM_xmlhttpRequest があるので、どのウェブサイト上でスクリプトを動かそうが、あらゆるサイトにアクセスする事が可能です。この観点から考えると、クッキーが漏洩するどころの騒ぎではありませんし、スクリプトを有効にするドメインが限られていた所で大した意味はありません。例えば Google Search を便利にするようなスクリプトに、mixi のパスワードを任意の値に変更させるようなトロイを仕込む事も難しくないでしょう(実際に作って試しました*1)。もちろん対象サイト上に、XSS や CSRF の脆弱性がなく
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
JavaScript Tips collection - libraries
DHTML用ライブラリ集 ここでは、CrossBrowser用スクリプトを作成する上で、 基本的な情報の取得や設定を行うためのワンライナ的なスクリプト ( 要は数行の関数 )を紹介します ◆ ここで挙げている関数群は全て Windows98版 IE6, NN4, Mozilla で動作確認していますが、 その他のバージョンおよびプラットフォームでは確認していません # 但し、Opera(Win, Linux), Safari(Mac), Konqueror(Linux) の最新版でも # ほとんどの機能は動作するようにしてあるつもりです もし、動作上の問題あるいは記述ミスなどを発見された方は、 ご面倒でもご連絡下さると喜びますf(^^; // version of library LCB_version = 3.1; // _mac : true = macintosh, false =
クロスブラウザ実現のための基本関数群（DOMブラウザ対応）
Window( Frame )の幅の取得 function getWindowWidth(){ if(window.innerWidth) return window.innerWidth; // Mozilla, Opera, NN4 if(document.documentElement && document.documentElement.clientWidth){ // 以下 IE return document.documentElement.clientWidth; } else if(document.body && document.body.clientWidth){ return document.body.clientWidth; } return 0; } Window( Frame )の高さの取得 function getWindowHeight(){ if
れぶろぐ - [JavaScript] iframe のサイズを JavaScript で調節する方法 (2)
■ iframe のサイズを JavaScript で調節する方法 (2) 前回の iframe のサイズを JavaScript で調節する方法 で、 Firefox や Opera だと、 iframe のサイズを大きくすることはできても小さくすることができなかった。 これを何とかできないものかと思い、もう一度自分で調べ直してみた。 高さが 300px 分くらいのテキストを幅固定の iframe 内に表示し、 その時の iframe 内での以下の値を調べてみた。 DOCTYPE は標準モードになるように設定してある。 document.documentElement.scrollHeight document.documentElement.offsetHeight document.documentElement.clientHeight 使用したブラウザは以下の４種類。 Inter
anything from heremouseover時の説明用Popup表示方法（script上の配慮事項）
やっかいなり！イベント座標系 ２年ほど前から文字だけのポップアップを行ってきたが、この場合にはマウスカーソル位置の右下にポップアップするように設計していた。ここにおいて注意しなければならないことは、ポップアップアイテムがwindow内辺からはみ出さないようにすることであり、その点でかなり苦労した。 それは、ブラウザ毎にイベント座標の表現方法が異なるためであり、特にIEの場合にはスクロール値が、ブラウザの描画モード（標準か互換か）によっても変わるため、「window内の任意の一点」を取得するのにかなり難儀した。また、イベント座標系における各種のプロパティが、一体どの部分の寸法なのかをしっかりと把握するのにも苦労した。手持ちのJavascript参考書にも、イベント座標系について全面的に説明されているものがなく、またネット上でもこれと言った解説は、なかなかなかった。強いて言えばマイクロソフトm
はてなスターアンケートの作り方 - 日々是餃子おかわり！
追記（2007.10.17） 仕様変更でどうやら＜h3＞タグにはてなスターをつけることが出来なくなったっぽい＞＜ はてなスターを使って☆をちりばめた大変メルヘンチックなアンケートが出来ると思ったので，ちょっと調べてみた．どうやら以下のタグで挟まれたところには，見出しでなくても自動的にAdd starが現れるみたい． <h3>○○○ <a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/□□□/■■■/△△△" class="bookmark-count"><img src="http://b.hatena.ne.jp/entry/image/http://d.hatena.ne.jp/□□□/■■■/△△△" alt=""></a></h3> 各自設定する項目 ○○○…アンケートの項目 □□□…自分のはてなユーザーid ■■■
「左上の魔術師」理論
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
ワシがはてなを使う10の理由 - 新しいTERRAZINE
5月ごろ流行った懐かしの「10の理由」メソッドを、またやってみるYo！ 元ネタは「俺等がOperaを使う10の理由」 どっちを先に読んでもいいよん。 はてダはMovable Typeではない 非MT環境。これだけでもはてダを使う理由になる。何故かって？それは↓ はてダは安全(secure)である ブログに溢れてる、コメント・トラックバックspamは、大抵はMTを狙って作られているよね？ はてダを使っている限りそれらとは無縁でいられるわけ。たまにはてダを狙ってくるヤツも居るけど、すぐにはてなが対処してくれる。ホント、ありがたいよ。つーか、やっぱ国産でしょ！ あ、しもた。日の丸ロゴおろしたんだった（笑） はてなの操作性はいかしてる 日記を次々とさかのぼって読みたい時ってあるよね？ なのに他のブログだと「前のn日」がないんだよ。なんでだろー？ ただ、この「n日」は運営者だけが設定できて、読者はで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript, Neo-Generation/Regular Expression
Justin Schuh (@jschuh@infosec.exchange)
Microsoft Learn: Build skills that open doors in your career
Microsoft Learn: Build skills that open doors in your career