!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
HDD＆DVDレコーダー比較表＆用語解説
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
Greasemonkey スクリプトは安全ではありません
■ Greasemonkey スクリプトは安全ではありません Webアプリケーションセキュリティフォーラム の奥さんと高木先生のバトルより。 高木先生 ええと、「クッキーが漏洩する程度なので問題ない」と聞こえたような気がしたんですが。 Greasemonkey には超絶便利な GM_xmlhttpRequest があるので、どのウェブサイト上でスクリプトを動かそうが、あらゆるサイトにアクセスする事が可能です。この観点から考えると、クッキーが漏洩するどころの騒ぎではありませんし、スクリプトを有効にするドメインが限られていた所で大した意味はありません。例えば Google Search を便利にするようなスクリプトに、mixi のパスワードを任意の値に変更させるようなトロイを仕込む事も難しくないでしょう(実際に作って試しました*1)。もちろん対象サイト上に、XSS や CSRF の脆弱性がなく
Same-origin policy - Wikipedia
In computing, the same-origin policy (SOP) is a concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obt
blog.genxx.com » 年下の女の子が好き、という男――「ピュア」論
都市論の続きについては、関連するネットワーク論の英語文献を読み始めたら意外と時間を食っているので、いましばらくお待ち下さい。今日はひさびさの恋愛論です。そう遠くはない以前に18歳の女の子と付き合っていたことがあった。「18歳」と聞くだけで「ええなぁ～俺にも紹介しろや～」とおバカなリアクションを返してくる男はたくさんいたものだが、そもそも、なぜ一般的に（平均すると）男は年下の女性を好みがちなのだろうか。また、年上の男と付き合っている女性が、「わたし、あの人に比べたら人間的な深さも経験もないし、私みたいなのと喋っていて楽しいんだろうかと不安になる」と発言するのを聞くこともよくあるのだが、これをどのように考えたらよいだろうか。（このBlogを読んでくれているであろう数人には既に飲み屋で喋ったネタですが、お許しをば） 「水を弾く」ぴちぴちの肌、汚れを知らない（ry――まぁ、たしかに身体（カラダ）と
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript, Neo-Generation/Regular Expression
あなたがJavaScriptをoffにする理由を教えてください - リッチクライアント & 帳票
『はてなダイアリー - つれずれなるままに… - 何かつまらなかったのでHatenaStar.jsが利用しているAPIを調べてみた。』へのコメント
Justin Schuh (@jschuh@infosec.exchange)
『http://s.hatena.ne.jp/mind/stars』へのコメント
Microsoft Learn: Build skills that open doors in your career
Microsoft Learn: Build skills that open doors in your career
『日本の徴兵制』へのコメント