画像単体表示時に各ブラウザが適用するスタイル
ブラウザで画像ファイルを単体で開いたとき、ブラウザによって表示の仕方が違っていたのが気になったので、画像表示ページのCSSを調べてみました。 なかなか面白かったですし、何かの参考になるかもしれません。 Google Chrome & SafariChrome 20.0.1115.1 dev-mとSafari 5.1.5で調査。 画像は表示領域の左上にぴったりと表示される。画像が表示領域内に収まりきらない場合は縮小して全体表示。スタイルは各要素にstyle属性で直接指定されます。 body { margin: 0px; } img { -webkit-user-select: none; cursor : -webkit-zoom-in; /* 縮小表示時 */ }FirefoxFirefox 12.0とAurora 14.0a2 (2012-05-01)で調査。 表示領域は暗い感じに塗りつ
はてなブログ | 無料ブログを作成しよう
思いは言葉に。 はてなブログは、あなたの思いや考えを残したり、 さまざまな人が綴った多様な価値観に触れたりできる場所です。
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
Customizing web forms with CSS3 and WebKit
Last week, we shared a few things we’d learned about UI in mobile WebKit browsers. In that post we touched briefly on the idea of using CSS3 to make form inputs that look and feel the same in all WebKit browsers across platforms. Today I’d like to share some specific examples of how we did that. Getting started Customizing form elements in WebKit browsers all starts with applying the -webkit-appea
Safari 5 で :visited の挙動が変更に : Safari Realized
2010年06月13日12:03 Posted incolumn Safari 5 で :visited の挙動が変更に Safari5（及び Safari4.1） では :visited の挙動に大きな修正が入っています。 Safari 5.0 および Safari 4.1 のセキュリティコンテンツについて 対象となるバージョン：Mac OS X v10.4.11、Mac OS X Server v10.4.11、Mac OS X v10.5.8、Mac OS X Server v10.5.8、Mac OS X v10.6.2 以降、Mac OS X Server v10.6.2 以降、Windows 7、Vista、XP SP2 以降 影響：悪意を持って作成された Web サイトにアクセスすると、ユーザがアクセスしたサイトを特定できる可能性がある。 説明：WebKit による CSS
[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス
使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。 HTML ナビゲーションはシンプルなHTMLです。 <textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="clients"><a href="#">Clients</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </nav> </textarea>
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
CSS3 Dropdown Menu - Web Designer Wall
While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow wi
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
ユーザースタイルシート(Safari 4 Beta対応版)
以前晒した私のユーザースタイルシート、Safari 4Betaになってからフォントの表示が上手くいってなかったのでここを参考に修正しました。 Safari 3.2まではLucida Grandeだけの指定で事足りたのですが、Safari 4Betaからはきっちりヒラギノも指定してあげなければいけないみたいです。 @font-face { font-family: "Osaka", "Osaka-Mono", "ＭＳ ゴシック", "ＭＳ Ｐゴシック"; src: local("Hiragino Kaku Gothic ProN") !important; } @font-face { font-family: "Osaka", "Osaka-Mono", "Verdana", "Geneva", "Arial"; src: local("Lucida Grande"); } b,stron
Thin Text in Safari with Snow Leopard // Ordered List // We Make The Web Beautifully Simple
Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, I’ve found an alternative. The thick text is much more noticeable when light text is placed on a dark background. It annoys me so much, that as I was working on a redesign for thi
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
Firefoxでスクロールバーの有無によるセンターの位置のずれ｜ConneLog｜ConneCre
Firefoxではスクロールバーの有無によるセンターの位置のずれが生じます。 スクロールバーのでない短いコンテンツでもセンターの位置がずれないようにするスタイルシートの指定方法のメモ。
15 Ways to Optimize CSS and Reduce CSS File Size
Introduction I have gathered a long list of CSS optimization and file size reduction techniques that have been using by most designers/developers. Depend on the complexity of your CSS code, these techniques might greatly reduce your CSS file size, or maybe just a few kilobytes. Also, you might also want to read my previous post regarding CSS - 15 CSS Tips and Tricks to learn how to write more effi
CSS Position Fixed for IE6
How do you get position:fixed css working in Internet Explorer 6? The trick is to use an Internet Explorer CSS expression. You can’t simply put the logic in there directly or it’ll cache the result and not update. The simplest fix is to wrap your logic in eval. How do you solve the jitter issue?! Apparently Internet Explorer has a multi-step rendering process. When you scroll or resize your browse
Super Awesome Buttons with CSS3 and RGBA
We've updated the super awesome buttons demo to include the button element and Mozilla box shadows. Check it out! **We love CSS at ZURB.** We love it so much that we're using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to
Safari - Apple Developer
Safari for Developers Safari is the best way to see the sites on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, hundreds of millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting edge technologies in Safari to deliver the best-in class websites and apps. Apple Pay on th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Max Design
Screencast: Webkit in Titanium