Improving UI Animation Workflow with Velocity.js | CSS-Tricks
The following is a guest post by Julian Shapiro. Julian recently released Velocity.js, a more performant jQuery replacement for .animate(). He recently wrote about how JavaScript animations can be so fast over on David Walsh’s blog, a topic we’ve covered here as well. In this article, Julian introduces Velocity.js itself. Velocity.js is a jQuery plugin that re-implements jQuery’s $.animate() funct
DOM Sprites: a Viable Alternative to Canvas - Build New Games
Today we’re going to look at an alternative to the CANVAS tag which works great for HTML5 games. The best part? It is easy to implement, and works everywhere! Though canvas is what people think of first when considering ways to render game sprites using HTML5, it is notoriously slow on older mobile devices, obsolete browsers, and many game consoles. On some legacy hardware and software, there’s NO
The New Sizzle | Official jQuery Blog
In order to make your 4th of July more sizzlin' (you're welcome), the jQuery team is happy to announce that Sizzle, jQuery’s CSS selector engine, is better, faster, and more reliable than ever! Sizzle has received a substantial rewrite to be included with the release of jQuery 1.8. First, credit should be given to Diego Perini for pointing me in the right direction as well as Samuel Lebeau for cre
ヒトリデハキケンジャ GitHubのコーディング規約を授けよう
コードが適切に整形されているかどうかはデザイナーやエンジニアなどコードを書く人にとっては日常的な課題のひとつです。プログラミング言語やツールに応じて様々なコーディング規約によって正しいコードの書き方が定義されていますが、GitHubが社内で利用しているコーディング規約を「スタイルガイド」としてサイト上で公開しています。 このスタイルガイドは5個のセクションに分かれています。 概要 スタイリング(CSS) マークアップ(HTML) ビヘイビア(JavaScript) Ruby GitHubということで様々なRubyのツールとの組み合わせが前提になっている部分もありますが、CSSに対しての規約は例えば下記のようになっています。 インデントはスペース2つのソフトタブを使う プロパティ宣言の:の後にはスペースを空ける 宣言の{の前にはスペースを空ける カラーコードはrgbaを使わない場合は数字で指
Profiling CSS for fun and profit — Perfection Kills
I’ve been recently working on optimizing performance of a so-called one-page web app. The application was highly dynamic, interactive, and was heavily stuffed with new CSS3 goodness. I’m not talking just border-radius and gradients. It was a full stack of shadows, gradients, transforms, sprinkled with transitions, smooth half-transparent colors, clever pseudo-element -based CSS tricks, and experim
jQueryでbackgroundPositionを取得するときの注意 :: 5509
$(‘hoge’).css(‘backgroundPosition’)だとIEで値が取れないんですね、不便か。 XとYを別々に取得したい 値の検証 var bgPosDef = $('#hoge').css('backgroundPosition'); IE8まで（9は未検証） console: null（空） Firefox, Chrome, Safari, Operaなど console: 50px 50px IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。 var bgPosX = $('#hoge').css('backgroundPositionX'); var bgPosY = $('#hoge').css('backg
JavaScriptでCSSのbackground-positionの値を取得
IEとFirefoxで取得方法が異なる。 elem = document.getElementsById(“hoge”) でエレメントを取得後、IEだと、 elem.currentStyle[“backgroundPositionX”] elem.currentStyle[“backgroundPositionY”] で、firefoxだと、 document.defaultView.getComputedStyle(elem, ‘’).getPropertyValue(“background-position”) で、 “50% 50%“という感じで取得できるので、split等にて分割して取得。 下記のサンプルは、#hogeのbackground-positionのY軸が設定されていないか、0の場合、20px開始位置を下にずらす。 var elem = document.getEleme
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
Code Tutorials | Envato Tuts+
Get every type of asset for any type of project, and access to AI tools From $16.50/m
JavaScriptでclearfixみたいなものを実装する実験 - あと味
clearfixの記述を見てて、contentプロパティで内容追加して、blockにして、高さを消すとかやってるので、JavaScriptでもできるんじゃね？と思ったら、実際できたので、実用性は抜きにしてメモとして投稿しておきます。 CSSでのclearfixの記述 いろいろあるみたいですが、ヨモツネットさんの記事から拝借します。 こんな感じに書きます。 element{ /zoom : 1; } element:after{ content : ''; display : block; clear : both; height:0; } フロートした子要素を持つ親要素の内容の末尾（要するに子要素）に、contentプロパティで内容を作ります。 その内容はclear: both;するためだけのものなので、height: 0;にして見えなくしちゃいます。display: block;はhei
iPhoneアプリケーション開発ガイド
TOPICS Programming , Mobile , HTML/CSS , JavaScript 発行年月日 2010年08月06日 PRINT LENGTH 208 ISBN 978-4-87311-461-3 原書 Building iPhone Apps with HTML, CSS, and JavaScript FORMAT Objective-Cを使わなくてもWebアプリケーション開発の標準技術でiPhoneアプリケーションを開発できます。本書ではパソコン向けWebアプリケーションをスタート地点に、CSSのカスタマイズ、jQueryの利用、jQTouchを利用した高度なアニメーション、PhoneGapを使ってネイティブアプリケーション化することでiPhone固有の機能を使う方法、そしてApp Storeへの登録に至るまで、HTML＋CSS＋JavaScriptによるiPh
第10回 JavaScriptとCSS | gihyo.jp
こんにちは、太田です。前々回と前回はHTMLの操作について解説しました。今回は、CSSの操作を中心に解説していきます。 CSSとJavaScript JavaScriptからCSSを扱うとは、JavaScriptから要素に適用されているスタイルを変更して見た目を変化させる、ということを意味します。その具体的な方法にはいくつかの種類があります。 styleプロパティの操作 class名の操作 CSS自体の操作 では、styleプロパティの操作から順番に見ていきます。 styleプロパティの操作 要素のstyleプロパティを直接操作する方法は、その要素だけに影響するので1回あたりの処理コストは低く済むというメリットはあります。しかし、複数のプロパティの操作に加え、多くの要素のスタイルを変更する場合には、スタイルを変更するたびに描画への影響の計算が行われる（この計算をreflowと呼びます）ので
styleタグのCSSや外部CSSの値を取得 - 三等兵
当たり前ですが、 element.style.xxx で取得できるのは要素にstyle属性として指定されている値だけなので。たとえば、 // css #box { width: 100px; } //html <div id="box"></div> //js var element = document.getElementById('box'); var style = element.style.width; // empty これじゃもちろん取得できない。ではこういう場合でもwidthプロパティを取得したいってときはどうするかというと、 var element = document.getElementById('box'); var style = (element.currentStyle || document.defaultView.getComputedStyle(ele
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Elm - delightful language for reliable web applications
Top Pens of 2013 on CodePen
https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/tree/master/Japanese
GitHub - HuddleEng/PhantomCSS: Visual/CSS regression testing with PhantomJS
256 CSS Classes Can Override an #id | Hacker News
JavaScript でメディアクエリを行う window.matchMedia の使い方
JavaScriptからCSSを操作する方法を結構詳しく調べてみた (Kanasansoft Web Lab.)