タグ Modernizr
人気順 10 users 50 users 100 users 500 users 1000 usersモダンCSSの新機能のブラウザ対応がこれで簡単になる! Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モ... 続きを読む
2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査 | コリス
フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどの... 続きを読む
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js | コリス
スマホ・タブレット・デスクトップのブラウザがさまざまな機能(WebGL, Canvas, rem unit, async属性、タッチイベントなど)に対応しているか判別し、その判定を利用することができる超軽量(1kb)スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub ... 続きを読む
SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 (IE8 以前とか、旧 Android の標準ブラウザとか) に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript (とりあえず jQuery) 書いて SVG 未対応ブラウザに対しては代替画像に差し替える... 続きを読む
[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate | コリス
デモ:Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="j... 続きを読む
HTML5やCSS3のブラウザ対応を調査する「Modernizr 2.6」が登場 | エンタープライズ | マイナビニュース
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Modernizr開発チームは19日(米国時間)、Modernizrの最新版「Modernizr 2.6」を公開した。Modernizrは、次世代のWebテクノロジであるHTML5やCSS3の機能が利用できるかど... 続きを読む
シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy | コリス
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、... 続きを読む
[JS]Modernizrをウェブサイトの開発・勉強・納品ごとに正しく使う方法 | コリス
Modernizrの公式ブログより、Modernizrのどのバージョンを開発時・勉強時・納品時などにそれぞれ利用するべきか、開発者推奨の正しい使い方を紹介します。 下記は各ポイントを意訳したものです。 ローカル環境での開発・勉強 CDNでの開発・テスト カスタムビルド、すべてのプロダクト用 終わりに:スクリプトは最新版を ローカル環境での開発・勉強 新しいプロジェクトを始める時、または勉強する時は... 続きを読む
[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法 | コリス
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 続きを読む
に読み込むべき唯一のスクリプト「headjs」 | Mach3.laBlog
「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: T [...] 続きを読む
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr | コリス
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。InitializrでHTML5のテンプレート一式を作成する方法HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。トップページにアクセスし、4つの選択項目から自分の必要なものを... 続きを読む