IE 6, IE 7, IE 8 が退場した未来 - latest log
Internet Explorer の自動アップグレードについて | TechNet 長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after
IE 9以下に存在するセレクター数制限にはまった
IE 9以下に存在するセレクター数制限にはまった 開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。 SCSSだと割とカジュアルにセレクター数が増える CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため） との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。 // 共通部分 @mixin foo { color: red; .foo { font-size: 2em; // たくさんの指定… ... } } // 影響範囲を以下のページのみに限定したい #page-a { @include foo; } #page-b { @include foo; color: yellow;
clip プロパティで画像をトリミング
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
元画像群からSprite画像とCSSを生成·Sprite Factory MOONGIFT
小さなアイコン画像などを一つにまとめて表示はCSSで切り出して行うのがCSS Spriteです。用意する手間があるため二の足を踏むケースも多いのですが、Sprite Factoryを使えばごく手軽に運用ができそうです。 インストールします。Rubygemsでインストール可能です。 実行はsfコマンドで。ディレクトリを引数としてそれ以下にある画像を全てまとめてくれます。 生成されるのはimg.cssとimg.pngです（カスタマイズ可能）。 生成されたCSSです。img.pngのSprite指定になっています。 生成された画像です。全て横につながった画像になっています。 生成された画像と元ディレクトリです。 オプションです。パスやSass形式での出力などに対応しています。 Sprite Factoryはクラス名に元のファイル名がつけられるので、Sprite画像は見ずともクラス名の指定がしやす
Image Tint With CSS
By Louis Lazaris / November 16, 2011 / 46 Comments Updated: August 7, 2022 Update: (May 7, 2013) There are now two specifications that make this sort of thing possible with CSS: Filters and Compositing and Blending. The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers. One of the wish list items a few peopl
様々なCSSのアニメーションTIPSを集めた「Guide to CSS Animations」
最近ではFLASHはJavascriptだけではなく、CSS3が登場したことにより、CSSでアニメーションを表現するということも徐々に増えてきているのではないでしょうか？今日紹介するのは様々なCSSのアニメーションTIPSを集めた「Guide to CSS Animations」です。 Using CSS3 Transitions, Transforms and Animation javascriptの代替になってくれるようなものから、Flashのようなリッチなアニメーションまで様々なCSSで実現するアニメーションTIPSが紹介されています。今回はいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 The Guide To CSS Animation: Principles and Examples 慣性的な動きを表現してくれるCSSアニメーションの作り方。 C
要注目！CSSとJavaScriptで作るアニメーション·Animatable MOONGIFT
AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。 最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。 色々な画像が並んでいます。マウスオーバーでアニメーションが実行されます。 6番は曲線が変化するアニメーションです。 2番は背景画像がアニメーションします。 12番はドロップシャドーです。 fromとtoののところで実際に設定するCSSプロパティが分かります。 data-fromとdata-toでプロパティを指定します。 AnimatableはいわばFlashのアニメーションに似ています。最初のフレームをdata-from
How Do Browsers Render the Different CSS Border Style Values?
By Louis Lazaris / September 21, 2011 / 29 Comments Updated: August 7, 2022 You’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser. We all know there are other values for border-style, but it’s likely you’ve never used any of them. You may have used a value of “dashed” or “dotted
10 JavaScript & CSS Tools to Make Your Forms look Good
According to research, 86% of surveyed people fill out at least one web form per week. About 34% of those surveyed said they fill out even more. Regardless of the purpose of your website, it should definitely contain at least one web form. To make sure your visitors want to interact with your site, it’s crucial to keep it simple and convenient for them to fill in your forms. In this article, you w
CSS Buttons: Tutorials and examples
Creating buttons with CSS is one of the most experimented-with web design techniques around. Examples and tutorials abound. The biggest recent trend in CSS button design seems to be eliminating images, especially background images, from buttons. But there are plenty of other things designers are doing with buttons, some that do include images. Below we've collected more than twenty tutorials, exam
CSS3 @font-face Design Guide
Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn’t, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mista
30 Helpful CSS Cheat Sheets Design Press
Human mind can’t remember every thing it is fed with But developers among others can’t afford to forget basics like the one of CSS. Thank God we have access to various CSS Cheat sheets both online and offline. Cheat sheets are like a time saver dose, you need them every now and then. Now you don’t need to remember each step of transition from CSS to CSS3, just click on any of these cheat sheets. T
CSS 8puzzle - jsdo.it - Share JavaScript, HTML5 and CSS
CSSプログラミングでJavaScriptを使わずに8パズルを作りました。 以下のブラウザでアニメーション込みで動作します。 ・Firefox 4 ・GoogleChrome 13 (2011/6/8時点でのdevチャンネル) ・Opera 11 以下のブラウザでアニメーション無しで動作します。 ・Firefox 3 以下のブラウザでは動作しません。 ・IE ・Safari ・GoogleChrome 12 (2011/6/8時点でのStableチャンネル) <div id="panel"> <input type="checkbox" id="show_number" /> <input type="radio" class="r1-1" id="r1-1_1-1" name="1-1" value="1-1" /> <input type="radio" class="r1-1" id
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
Mastering CSS Reflections in Webkit
The box-reflect property is just one of many awesome new CSS3 effects that Webkit brings to the table. Unfortunately, it’s not the easiest to use. There’s a lot of syntax that can be confusing and today we’re going to sift through it and explain it in detail so you can get the hang of it. It’s important to note that, at this point, box-reflect is only supported by Webkit browsers. It’s a superfluo
CSS: Elastic Videos - Web Designer Wall
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
Components · Twitter Bootstrap
Tattoo Ideas, Trending Hairstyles, Wordpress Themes and More!
cssglobe.com