Prefix free: Break free from CSS vendor prefix hell!
-prefix-free Break free from CSS prefix hell! Only 2KB gzipped -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. “[-prefix-free is] fantastic, top-notch work! Thank you for creating and sharing it.” — Eric Meyer Features Processes every stylesheet in <link> or <style> elements
Improving the performance of your HTML5 App | Articles | web.dev
Introduction HTML5 gives us great tools to enhance the visual appearance of web applications. This is especially true in the realm of animations. However, with this new power also come new challenges. Actually these challenges aren't really that new and it might sometimes make sense to ask your friendly desk neighbor, the Flash programmer, how she has overcome similar things in the past. Anyway, w
描画とかGPUアクセラレーションの怪 (モバイル編)
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
rochas.cc
rochas.cc 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
DOMContentLoaded and stylesheets · molily
Introduction to DOMContentLoaded The DOMContentLoaded event is one of the main pillars of modern, unobtrusive JavaScript usage. This event fires after the HTML code has been fully retrieved from the server, the complete DOM tree has been created and scripts have access to all elements via the DOM API. Usually, this point in time is called “DOM ready”. In contrast to the load event, assets like ima
Post by @hamalog
NGの方を何度もリロードすると、ピンクのdivがたまにslideDownしない。自分がこれを確認したのはChrome。ver.16.0.912.63。理由は、link要素を先に書かないと、DOMContentLoad時に外部スタイルシートが適用されてないかららしいです。スタイルシートが適用されてないと要素の高さが0になっちゃっていてアニメーションできなくなってるっぽい。これは、こんなサンプルみたいに、めちゃめちゃシンプルな場合にしか発生しなさそうだけど、そんなことがあるのか…。以下のサイトにそれっぽいことが詳しく書いてありました。パラレルで読み込むとかDOMContentLoadedのタイミングがどうとかがなんかめんどいらしい。
offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js
簡単な定義 要素のoffsetLeftプロパティ 要素の左辺と、offset基準要素の左辺との距離(px) 要素のoffsetTopプロパティ 要素の上辺と、offset基準要素の上辺との距離(px) 要素のoffsetParentプロパティ 要素のoffset基準要素(これが何になるかが問題) ○結論から先に見たい方は＞＞こちら＜＜○ いままで、なんとなくoffsetTopやoffsetLeftを使っていました＾＾； これらは「ページ上の要素の位置」を格納してると思って。しかし、よくよく調べてみるとそれは誤りであり、かつかなり複雑でややこしいプロパティであることが分かってきました。*1 もともと、(ここでは述べませんが、offsetHeightとoffsetWidthも含め)offset〜のプロパティはIEがVer5で独自に実装したものらしく、その後他のブラウザが追随して実装したようです
Post by @hamalog
結論から言うと、-でも_でもキャメルでもどれでもいいと思う。で、自分が-を使っているのは、jQuery UIのcssがそのように書かれていて、僕が年中、ヘビーにjQuery UIのベースとなっているwidgetというフレームワークを使っているから。そして、仕事でやる場合にはだいたいコレを使うので、それに習っている感じ。参照：The jQuery UI CSS Framework -を使う時は、名前空間的な意味合いで使う。単語の区切り目としては使わない。具体的には、こんな感じ。ここで使っているmod-は、モジュールの単位を表す、mod-modulenameを起点にしてそっから下のひとまとまりがcssをごそっと適用するひとかたまりだよーという意味。apply-は、なんかJSをユーティリティ的にぽこっと適用するときに使う。 単語の区切り目は、キャメルケースにしたいところだけどあえてoremodu
JavaScriptによるスタイルシート(CSS)の操作
スタイルシートには、CSSファイルに記述されたスタイルルールと、各タグに記述されたスタイル属性があります。スタイルルールは、タグ名やクラス属性やID属性などを使ったセレクタによって、適用されます。 そこで、JavaScriptを使って、スタイルシートに関する各種データを操作する方法を紹介します。 このプログラムは、IE8, IE7, IE6, Firefox3, Safari4, Opera10, Sleipnir2で動作することを確認済みです。 スタイルシートは、document.styleSheets で取得できます。 ファイル毎に、配列として格納されています。 各スタイルシートには、スタイルルールの配列として格納されています。 スタイルルールは、セレクタとプロパティ＋値の形式に分かれて取得できます。
CSSslide - CSS と JavaScript で動くウェブプレゼンツール
CSSslide は、Web ブラウザで動くプレゼンツールです。 HTML Slidy や S6 にインスパイアされて作りました。CSS と JavaScript を組み合わせて作れます。実装が単純な反面、CSS を変更するだけで簡単にレイアウトを変更できます。 サンプル サンプル 1 : 黒を基調としたクールなデザイン。 サンプル 2 : 白を基調としたシンプルなデザイン。Firefox なら、メニューの 表示 → スタイルシート で配色を切り替えできます。 ダウンロード バージョン 1.0 CSSslide.html CSSslide.css CSSslide.js 上記の 3 つのファイルをダウンロードし、CSSslide.html を編集することで本文を作成できます。 PC 内でもサーバ上でもどちらでも動作します。 ライセンスは クリエイティブ・コモンズ 表示 2.1 日本 と M
チェックボックスのラベル範囲を視覚的に分かりやすくするCSS - スタイルシートTipsふぁくとりー
《2016年2月29日 10:00 公開/更新》 チェックボックスのラベル範囲を視覚的に分かりやすくするCSS [フォーム,色] HTMLのinput要素を使ってチェックボックスやラジオボタンを作ると、クリック可能な範囲がとても狭くて若干使いにくいですよね。クリック可能な範囲は「チェックボックスやラジオボタンそのもの」だけで、その横に書いた文字列はクリック対象外になってしまいます。 ところが、input要素と併せてlabel要素を使えば、ラベル部分(チェックボックスやラジオボタンに対応する文字列の部分)もクリック可能になります。そうしておく方が、一般的なソフトウェア上のチェックボックスやラジオボタンと操作の感じが同じになるので、ユーザビリティ上も望ましそうです。 以下の2つのチェックボックスは、1つ目は「チェックボックスそのもの」しかクリックできないデフォルトの状態です。文字列部分をクリッ
Web系雑記: JavaScriptでz-indexを操作するときの注意
(11/15)HTML5プロフェッショナル認定試験レベル1に合格しました (11/08)Windows10でエクスプローラーで開いてるフォルダをコマンドプロンプトで開くのが楽になった (02/16)CatalystでスタックMACアドレスの扱いが機種ごとにどう違うか (02/02)もう一つのSDN? Simple Defined Networkingとは (02/02)RealtekのNICでタグVLANのタグをパケットキャプチャで確認する (11/06)Windows標準で使用できる正規表現対応エディタとして「PowerShell ISE」という選択肢 (09/09)OpenFlow超初心者が最初の1週間で読んだ本たち (08/21)Catalystのdefineコマンドを使ってみた 一般(75) (X)HTML+CSS(5) JavaScript(12) UI・デザイン(6) Unix
Opera の CSSStyleSheet.insertRule はちょっとバグってる - IT戦記
以下のコード var element = document.createElement('style'); element.appendChild(document.createTextNode('')); document.getElementsByTagName('head')[0].appendChild(element); var sheet = element.sheet; // 以下のように CSSStyleSheet の先頭に二つのルールを挿入していく sheet.insertRule('html body { background: gray }', 0); // 0 番目にこのルールを挿入 sheet.insertRule('html body { background: red }', 0); // 0 番目にこのルールを挿入 このようにするとルールの順番は html
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
Javascript cssRules - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる
artcodeグループ - 2007 CSS Study Meeting
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
overflow samples
style - MDC
優雅なWeb制作のためのテクニック
社å´å£«è©¦é¨å¡¾ 社å´å£«è©¦é¨å¦æ ¡ 社å´å£«è©¦é¨å¯¾ç 社å´å£«è©¦é¨åå¼·æ³ ç¤¾å´å£«è©¦é¨åèæ¸ at usrb.in