YappoLogs: クロスブラウザ対応やってみて思った事
クロスブラウザ対応やってみて思った事 HTMLやらCSSやらJavaScriptやら色々弄った感想 - Firefox, Safari, Google Chrome なんかは割と手がかからない - Opera も上の3つ抑えてればだいたいok - なんかSafari4のJavaScriptの挙動が3と微妙にちがう - IEは死ね、IE7からだいぶ互換性的な物がよくなってるけどIEは死ね。 -- IE6のサポートを切り捨てる時代はまだか? - IE8は確かにJavaScriptが速くなってるがGoogle Chromeは劣るしSafariとか本当速い、Firefox3.0は結構遅い - z-indexの事を考えてないで作ってると、いざとなったら本当にびっくりする - pngの透過画像をあわせるのは案外しんどい -- DXImageTransform.Microsoft.AlphaImageL
複数のCSSをまとめるApacheのハンドラ - Hack Forever
ふと思いたって適当に書いてみました。 小さく分割されたバラバラなcssファイルを、1つのファイルに連結して出力します。更新日時を見て、分割ファイルのいずれかが更新されてたら、連結ファイルを書き換えます。(ついでにminifyもカマしてみてますがこれはどうかな？) もちろん開発環境向けなわけですが、本番環境にはそのまま連結ファイルを上げればいいってことで。 今のとこ、configでディレクトリを指定してその下のcssファイルを全部読むって感じになってるんだけど、これだと結局1種類しかできないので素敵じゃないかもと思うので、どうしようか考え中です。 package Apache::ConcatCSS; use strict; use Apache::Constants qw(:common); use Apache::Log (); use CSS::Squish; use CSS::Mini
style.cssText の使い処に関する考察 - IT戦記
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
「display: none」によるPattern Driven CSS - 日向夏特殊応援部隊
d:id:ZIGOROu:20070118:1169089995 で提唱したPattern Driven CSS(以下PDCで略す)ですけど、昨日ふと思いついた事です。 あとちょっと追記しました。 「display: none」によるパターンのフォーカス 例えば下記のようなHTMLがあるとする。 <body> <div id="content-root" class="section"> <h1>Yet Another Hackadelic</h1> <ul id="global-navigation"> <li><a href="" title="">最新の日記</a></li> <li><a href="" title="">日記一覧</a></li> <li><a href="" title="">日記を書く</a></li> <li><a href="" title="">管理</
floatは「回り込み」ではない:てんぽ
てんぽ: floatは「回り込み」ではない CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど 「CSSのfloatプロパティは『回り込み』させるものである」とよく説明されますが、それは特定条件下での表示結果がそのように見えるだけであって、あまり正確ではありません。 「回り込み」という表現はfloatを使いこなすうえで、語弊になっていると思います。 floatとは、通常の流れ（normal flow）から取り除き、左（または右）に寄せるです。 floatは「回り込み」ではない <p> <img src="xxx.jpg" alt="floating image"> 「回り込む」テキスト </p> このときimg要素を左にフロートさせた（float:left）なら、後続するテキストはimgの右側に「回り込み」ます。 これは確かに回り込みと呼べます。 では、ブロックレベル要素を
tech.nitoyon.com@hatena - はてブのCSSをカスタマイズしてみた
hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
Underconstruction by Taiyo@hatena
来年ものすごく流行りそうな手法が公開された。 これは痛い。 Google Desktop Exposed: Exploiting an Internet Explorer Vulnerability to Phish User Information 関連： eWeek記事 ITmediaの記事 I call this attack CSSXSS or Cascading Style Sheets Cross Site Scripting. うまいこと名前を付けたもんだなぁ…… 記事ではGoogle DesktopからHDDの情報を抜けることが問題視されるような書き方になっているが、CSSXSS自体はGDSとは関係がない。 一言で言うと、cssのimport文で任意のWebサイトの情報を抜き出せることを利用した攻撃だ。ログインして利用するWebサイトのHTMLが、ほかのWebサイトで利用で
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers
Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list. Go to Listamatic. Well, you asked for them. Nested lists! Choose from one of the growing number of samples or submit a list of your own. Go to Listamatic2. Step by step tutorials on using CSS to create background image lists, rollover lists, nested
Ocher - フルCSSサイトの超高速構築
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。 いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。（*勝手に命名） 作り方大公開（らしい） 画面デザインを領域に分け、名前を決めておく。 見出しレベルを確認。 Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。 見出し付けを行う。 メニュー項目のリスト化。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ライブドアブログ｜無料で豊富な機能が充実
フロートとネガティブマージンまとめ:CSS | Tech de Go
http://e8y.net/blog/index.php?p=124&more=1&c=1