ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
CSS Font Loading Module Level 3を試してみた - console.blog(self);
1年以上前から、ちゃんと調べたいと思っていたけど、やっていなかった。 CSS Font Loading Module Level 3は、2014/06/30時点で最終草案(Last Call Working Draft) になっている。CSS Font Loading Module Level 3はフォントのローディングに関する仕様書。 CSS Font Loading Module Level 3 - W3C Last Call Working Draft, 22 May 2014 最新のEditor's Draftはこっち。 CSS Font Loading Module Level 3 - Editor’s Draft フォントについての仕様書はCSS Font Module Level 3で、2014/06/30時点で勧告候補(Candidate Recommendation)にな
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
Safari on iOS 7 and HTML5－firt.dev
Problems, changes and new APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 12 years ago (18 Sep 2013) About 18 min reading time #ios #html5 #webview #homescreen webapps Apple has rolled out iOS 7 with iPhone 5S and iPhone 5C . As expected, Apple has published just 10% of the necessary information for web developers, and I can say without fear of mistake that this is the buggies
Webkit に最適化されたサイトを IE10 に適応させるためのガイド
スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。 Microsoft、「WebKitはWeb標準を破壊している」と主張 ： スラッシュドット・ジャパン ちなみに翻訳元の記事は 「Windows Phone Developer Blog」 で書かれた内容なので、「Windows Phone 8 で動作する IE10」 っていう書き方になっている部分や、すべて Webkit と対比して書かれているなど、モバイル
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
第10回 JavaScriptとCSS | gihyo.jp
こんにちは、太田です。前々回と前回はHTMLの操作について解説しました。今回は、CSSの操作を中心に解説していきます。 CSSとJavaScript JavaScriptからCSSを扱うとは、JavaScriptから要素に適用されているスタイルを変更して見た目を変化させる、ということを意味します。その具体的な方法にはいくつかの種類があります。 styleプロパティの操作 class名の操作 CSS自体の操作 では、styleプロパティの操作から順番に見ていきます。 styleプロパティの操作 要素のstyleプロパティを直接操作する方法は、その要素だけに影響するので1回あたりの処理コストは低く済むというメリットはあります。しかし、複数のプロパティの操作に加え、多くの要素のスタイルを変更する場合には、スタイルを変更するたびに描画への影響の計算が行われる（この計算をreflowと呼びます）ので
[brothercake] CSSUtilities
Version 0.99 Beta — 4th April 2010 CSSUtilities is a JavaScript library that provides unique and indispensible methods for querying CSS style sheets! Here are some of the things it can do: CSSUtilities can find all the rules that apply to an element, including information about properties, media, specificity and inheritance. It can give you properties information that bypasses browser normalizatio
Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement | Filament Group, Inc.
Introducing EnhanceJS: A smarter, safer way to apply progressive enhancement As we discuss in our new book, Designing with Progressive Enhancement, and in previous articles and presentations, building with progressive enhancement is essential to ensuring a usable experience for all. But how do you determine which browsers should receive the enhanced experience and which should stick with the basic
ウノウラボ Unoh Labs: iモードブラウザ 2.0まとめ
こんばんは、五十川です。 ご存知の通り、5月以降に発売開始されたNTTドコモの携帯電話の殆どには、新しいiモードブラウザ 2.0が搭載されています。iモードブラウザの大幅な仕様の拡張はi-XHTMLの登場以来ということになりますが、iモードの登場から10年経って登場した新しいブラウザは、i-XHTMLのときよりも遥かに大きな、過去最大の変化を遂げています。 iモードブラウザ 2.0の詳細は、ドコモ公式のiモードブラウザ 2.0にまとめられています。以下では主要な変更点を確認していこうと思います。 キャッシュ容量拡大 1画面あたり読み込めるデータの最大量が、従来の100Kバイトから500Kバイトに、大幅に拡大されました。ご存知の通りiモードの場合この値は、画像などの外部リソースもすべてひっくるめた値ですが、iモードブラウザ 2.0では、新たにCSSファイルやJavaScriptファイルも外部
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
大量の同じ画像の表示 - 素人がプログラミングを勉強していたブログ
画像周りの速度メモ - #生存戦略 、それは - subtech 大量に同じ画像を表示したいとき - 0xFF もっと高速にする方法。 background-repeat and clientX <!DOCTYPE HTML> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>background-repeat and clientX</title> <style type="text/css"> #star{ width: 0; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); background-repeat: repeat-
大量に同じ画像を表示したいとき - os0x.blog
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
IE専用技のdocument.createStyleSheetは使いすぎると駄目らしい - hagino3000's blog
IEでのみ使えるdocument.createStyleSheetですが、使いまくるとJavaScriptエラー「この操作を完了するのに十分な記憶域がありません」が発生します。DOM操作で変更できない所(htmlに対する指定等、下の検証コードがそうなっています）のStyleもいじれるので大変便利なんですが、使う時は注意が必要。 createStyleSheet http://msdn.microsoft.com/ja-jp/library/cc428025.aspx 検証コード <html> <head> <title>js create css test</title> <script type="text/javascript"> var count = 0; var test = function(){ try{ (function(){ document.createStyleSh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting
http://projects.pro.br/gsaraiva/jquerycssrule/
jquery cssプロパティ拡張
http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
visionmedia's sass.js at master - GitHub
Page