IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

CSS

クリックジャッキングの本質的な解決策

CSS

誰か書いてそうだけど、気にせずに投下 現実的な解決策ではなくて、本質的な解決策 クリックジャッキングはそもそも CSS の問題なので CSS の枠組みで解決すればいい。 CSS での解決策 具体的には、以下のルールをユーザースタイルシートに追加すればいい。 …

CSS のセレクタの名前の整理

はじめに 「CSS のセレクタ」っていうと以下のようなものを想像すると思うんですけど div.container ul > li じゃあ、 div はセレクタ? .container はセレクタ? div.container はセレクタ? > はセレクタ? などなど色々と疑問が出てくる訳で、どういう名…

IE で一時的に要素のスタイルを変更する

いろいろためしたけど、以下が一番楽 // 変更 element.runtimeStyle.cssText = ' width: 100%; height: 100%'; // 戻す element.runtimeStyle.cssText = ''; 特に、戻すときに cssText 以外のプロパティを空にしても、おかしな挙動をするので cssText を使う…

CSS Selector の最大の欠点

CSS

先頭に Combinator を置けないこと // 以下のようなことができない elm.querySelectorAll('> div'); elm.querySelectorAll('+ div'); elm.querySelectorAll('~ div'); Selector が仕様化されたときは、たぶん、サブツリーを起点に使われることなんて想像して…

Web 標準的な CSS の値変換方法(px → em など)(訂正あり)

はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element,…

めも

このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自…

駄文 - CSS

CSS

Cross Site Scripting とか Client Side Scripting とかいろいろあるなあと思った

bison の error トークンで行き詰まる

このゴールデンウィークに WebKit の CSSGrammar.y を写経していて bison では error トークンという特別なトークンが扱えることを知った。 kmyacc には、ない。 行き詰まった>< yacc の仕組みをちゃんとを勉強する error トークンと同等のことを行う方法…

WebKit の CSS の字句解析部分を JavaScript に移植しました

これを JS に移植しました。 http://svn.webkit.org/repository/webkit/trunk/WebCore/css/tokenizer.flex ポイント それなりに汎用的な Flex みたいなものを作ったので、その部分は CSS 以外にも使えると思います。 あと、定義を文字列で書かずに正規表現オ…

CSS の文字列を JS の文字列に

こんな感じかな。 JSCSS.CSSValueConverter = { _string: function(str) { return str.replace(/\\([0-9a-fA-F]{1,6}[ \t\r\n\f]?|\r\n|[ \t\r\n\f]|.)/g, function(str, t) { if (t.match(/^[0-9a-fA-F]{1,6}[ \t\r\n\f]?$/)) { return String.fromCharCode…

CSS の構文解析と @-webkit-*** ルールの意味

はじめに あのDan Kogai 氏にも好評な噂の名著「Jythonプログラミング」がついに発売されるわけですが、皆様いかがお過ごしでしょうか。今日は Jython にちなんで、 CSS の構文解析のお話をしたいと思います。(関係ない) 知ってますか? Safari(などの We…

DOM 2 Style の JavaScript オブジェクト

CSS のデータを扱う JavaScript を書きたくて作った いろいろと使えそうなので晒しておきます まだ、インタフェースだけですよ>< var JSCSS = {}; // http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet JSCSS.StyleSheet =…

MediaQuery まとめ

CSS

Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア(パソコンの画面、テレビ、プリンタ用紙など)を指定するときに使います。 以下…

「Acid2 test」と「マージンの相殺」のちょっとした疑問

CSS

マージンの相殺の仕様を読み直していて Vertical margins may collapse between certain boxes: … Box model と書いてあることに気がついた。 マージンの相殺はあくまで「may」なのだ。 なので、マージンの相殺をしないブラウザでも CSS 2.1 準拠とうたうこ…

CSS の「inherit」で継承されるのは Computed value 以外にありえない(と思ってる)

CSS

ちょっと色々調べていて 以下のような記事を読みました。 line-height の値には単位なしが良いとされる理由 - lucky bag 本当に役立つ素晴らしい記事だと思います。 でも、一カ所だけ確認したい箇所がありました 僕が間違っているかもしれないので、はっきり…

CSS の「値」とは何か

CSS

この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value(値)」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使…

CSS の名前の整理

CSS

CSS の話をする時に 名前をはっきりさせてないと混乱するので、整理しておこう。自分用です。けっこう適当です。 仕様 ここの仕様を見て書いています。 CSS Syntax Module Level 3 CSS 日本語では「スィーエスエス」と言いますね。 CSS とはHTML, XML の要素…

CSS3 のカスケーディングについてのおさらい

CSS

いつも忘れて、毎回どうだったっけって確認するのがめんどいのでまとめておきます。 仕様 参照する仕様は CSS3 とします。(ワーキングドラフトなので、この内容は変わる可能性があります) CSS3 の仕様は以下から探してください site:http://www.w3.org/TR/…

IE8 で実装された Selectors API とは何か?

はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archiv…

display: table-cell を使ったマルチカラムレイアウト

CSS

Acid2 Test で IE8 が display: table-cell をきちんとレンダリングするということが分かったので。 IE8 が普及する(笑)のを 5 年くらい先取りして display: table-cell によるマルチカラムレイアウトを書いてみました。 リンクは以下です。 http://amacha…

IE8 はある意味 Acid2 Test をクリアしていない

HTML5 の ML でこんな記述がありました。 Acid2 Test にこの meta タグないから IE8 合格してなくね?(意訳) <meta http-equiv="X-UA-Compatible" content="IE=8" /> うまいこというなあと思った</meta>

body の overflow: hidden が変

以下のようなコードがあって ... <html> ... <body> <div></div> </body> </html> body が overflow hidden で幅固定で div が横に伸びていったら div は body を「はみ出ない」と思うんだ。 でも、ブラウザによってははみ出てしまう。 Opera 9 はみ出る Safari 3 はみ出る Firefox 2 はみ出ない I…

style.cssText の使い処に関する考察

cssText って知ってますか? cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたい…

Opera の CSSStyleSheet.insertRule はちょっとバグってる

以下のコード var element = document.createElement('style'); element.appendChild(document.createTextNode('')); document.getElementsByTagName('head')[0].appendChild(element); var sheet = element.sheet; // 以下のように CSSStyleSheet の先頭に…

Safari で CSSStyleSheet オブジェクトを生成する方法

今まで Safari では出来ないと思っていました var element = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(element); var sheet = element.sheet; alert(sheet); // null こんな感じで null になってしまうので…

document.createStyleSheet で動的に CSS を生成

今まで var element = document.createElement('style'); document.getElementsByTagName('head')[0].appendChild(element); if (ie) { var sheet = element.styleSheet; } else { var sheet = element.sheet; } みたいにやっていた。 ところが dojo のソー…

Safari3 では :checked :disabled :enabled が使えるっぽい

CSS

サンプル http://amachang.art-code.org/safari3_css_selector/ でも <label> を横に並べて、 :checked + label とかやっても label は変わらなかった。まだバグがあるようだ。 :lang(en) とかも 使えるみたいだけどバグだらけで使いものになりませんでした。バージ</label>…

getComputedStyle について調べてたら深みにハマったのでメモ

getComputedStyle とは!? ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単! var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみ…

印刷プレビューで「F5」を押したらリロードできる拡張機能作ったよん。

印刷用 CSS 書いてますか? Web はユーザが見方を決められる唯一のメディアだと「コクボックルさん」が言っていたので、やっぱり印刷用のスタイルはきっちり書いておいたほうがいいですよ! でも、「書いて確認して、、、めんどくせー!だって、印刷プレビュ…

CSS Nite Shuffle に行ってきた

CSS

レポートを端々とまとめますよー 良いところも悪いところも隠さずまとめますよー。 そういえば、こういうレポート書くの始めてだ。 あ、ちなみに Apollo WPF は飲み会で聞いた話がほとんどでつ>< オープニング かっこいい動画。 スペシャルコンテンツ ミニ…