[B! javascript][css] ryownetのブックマーク

Material UI

Google's material design UI components built with React.

ryownet 2014/11/09

デザイン使いたいだけなのにReact動かすとかメンドイ

リンク

[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium

ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。スクリプトは、開発環境で実行してください。公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイルテストするページの全てに、当スクリプトを外部ファイルとして記述します。場所は、head内でも</bo

ryownet 2013/06/10

a-to-de

リンク

アニメーションgifならぬアニメーションjpg/png

今日（2011/5/11）のgoogleロゴはダンスのアニメーションになってて、それがとてもキレイでかっこいいアニメーションだったので、自分もアニメーション用のjsをちょこっと書いてみた。「Google」の6文字が踊る――マーサ・グレアムさん生誕記念のホリデーロゴこの人がロゴのアニメーション作ってた人。ほんと細部までキレイなアニメーション。このアニメーターのモーション技術すっげぇ。。んで、googleロゴの中身見てみると、gifアニメかと思いきやpngのポジションをずらす方法を取っててこれがネタばらしの一枚絵。そういえば、一昨日公開された、thaのFRAMED*のページでも使われてたなぁ、これ。と思い、普通にjs書ける人には一瞬でできるだろうから関係ないけど、この1枚絵さえ作れれば、誰でもアニメーションgifならぬ、アニメーションjpgとか、アニメーションpngつくれ

ryownet 2011/05/12

CSSスプライトでアニメーション。音は出ないけど、最近の高速化されたブラウザならこれくらいのFPSを使っても滑らかなのか。

リンク

外部cssを動的に読み込む方法 - Born Neet

ソースはたったこんだけ。 function loadCss(href, check) { if(typeof(check) == 'undefined') check = true; var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; link.href = href; if(check) { var links = head.getElementsByTagName('link'); for(var i = 0; i < links.length; i++) { if(links[i].href == link.href) return false; }

ryownet 2011/05/11

動的に<link>タグを生成。validにするためには<head>内に読み込まないといけないがこれなら可能。

リンク

twihelp.me

twihelp.me 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy

ryownet 2011/04/27

みんな大好きフロントエンドの高速化。することは正しいけど、してはいけないこともまとめるべき。cssビヘイビアとかfilterとかも。あとはCDNや別サーバに置いたりして分散...それはフロントじゃないか

リンク

古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log

uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。コードの解説を追記しました。「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」「CSS3セレクタを古いブラウザでも使いたい!」といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。特徴軽いよいろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない

ryownet 2009/06/25

JSでCSSを設定することで、あらゆるブラウザでCSS3を使える

リンク

jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

ryownet 2008/12/11

再ブクマ。クラス名だけを指定すると遅い。

リンク

IE8 で実装された Selectors API とは何か？ - IT戦記

はじめに IE8 には Selectors API という新しい仕様が実装されました。ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ簡単に説明すると getElementsByTagName や getE