CSSとJavascriptのための10の有用な代替方法

コードフォールバックは、多数のユニーク訪問者と妥協するのに最適なソリューションです。 Web上の誰もが同じオペレーティングシステム、Webブラウザ、あるいは物理的なハードウェアさえも使用しているわけではありません。これらすべてが、Webページが実際に画面に表示される方法に影響します。新しいCSSやJavaScriptのトリックを扱う際には、しばしばそのような技術的なバグに遭遇するでしょう。.

しかし、これらの落とし穴であなたを落胆させないでください。このガイドでは私はいくつかをまとめました 最も一般的な代替技術 CSSやJavaScript / jQueryに焦点を当てているWebデザイナーのためのものです。他のすべてが失敗するとき、あなたはユーザーに少なくとも基本的なページ機能性を提供したいです。シンプルさはユーザーエクスペリエンスデザインの分野で最高.

以下のガイドをチェックして、コメント欄にあなたの考えや質問をお知らせください。.

1.画像と角の丸い

CSS3技術は主流のWebデザインに急上昇しました。最も注目すべき特性の1つは ボーダー半径 その場で丸みを帯びた角を可能にします。これらは事実上すべてのボタン、div、またはテキストボックスで美しく見えます。唯一の問題はWebブラウザ間のサポートが限られていることです.

Internet Explorer 7を含む多くの古いブラウザはこのプロパティをサポートしていません。だから丸みを帯びた角をすべての標準的なブラウザのために働かせ続けるためにあなたは画像で予備を造る必要があるでしょう.

標準コードは、各コーナーの画像に対応しながら、メインdivの通常のCSS3プロパティを使用します。バックグラウンドでコーナー画像を表示するために使用されるメインコンテナ内に追加のdivを設定する必要があるでしょう。.

＃mainbox -webkit-border-radius：5px; / * Safari * / -moz-border-radius：5px; / * Firefox \ Gecko Engine * / -o-border-radius：5px; / * Opera * / border-radius：5ピクセル。 ＃mainbox .topc background：url（ 'corner-tl.png'）左上を繰り返さない。 #mainbox .topc span background：url（ 'corner-tr.png'）右上なしを繰り返します。 ＃mainbox .btmc background：url（ 'corner-bl.png'）左下を繰り返さない。 #mainbox .btmc span background：url（ 'corner-br.png'）右下を繰り返さない。

ストレスから身を守るために、RoundedCornrのようなアプリを使うことを強くお勧めします。 CSS 3と画像の両方を使用して角の丸いCSSを生成するブラウザ内Webアプリケーションです。これは、PhotoshopやGIMPなどのグラフィックソフトウェアにアクセスできないデザイナーにとって特に便利です。.

2. jQueryドロップダウンメニューシステム

ドロップダウンメニューシステムは、今日のWebに最適です。ただし、最大の問題は、訪問者がJavaScriptを有効にせずにWebサイトにアクセスしていることです。この場合、あなたのメニューはまったく機能しません。最善の解決策は、CSSを使用して各サブメニューのdivブロックを表示/非表示にし、ホバーに表示することです。.

このソリューションの唯一の問題は、Internet Explorer 6がこれらのCSSホバーセレクターをサポートしていないことです。しかしIE7 +はうまく機能します。もちろんJavaScriptが最初から有効になっていれば、すべてのブラウザで問題なく動作します。 CSS Plusに関するこのチュートリアルのコードは、私が見つけた最高のリソースの1つです。これはjQueryのソリューションだけでなく、IEの問題に必要なCSSも提供します。.

/ *現在のクラスはjQueryを介して追加されます* / #nav li.current> a background：＃f7f7f7;  / * CSSフォールバック* / #nav li：hover> ul.child display：block; ＃nav li：hover> ul.grandchild display：block;;

ソース

あなたが試すことができるもう一つの代わりの解決策はただIE6の各メニューを公然と表示することです。 Internet Explorerの条件付きコメントを使用して、ブラウザのバージョンに基づいてスタイルシートを適用できます。もちろん、これは最も美しい解決策ではないでしょう、しかしそれは単にうまくいくでしょう.

Internet Explorer 6がそれほど心配であるとは思わないのであれば、この代替の代替方法を気にする必要さえありません。上記のチュートリアルとそれに続くコードは、すべての主要ブラウザで厳密なCSSを使用してもJavaScriptメニューをロードするのに十分なはずです。.

3.ターゲットとするInternet Explorerのスタイル

私たち全員がMicrosoftのInternet Explorerから出るレンダリングの問題について知っていると確信しています。私は彼らの最新のIE8とIE9の将来の見込みについて少し信用を与えることができます。しかし、まだIE6 / IE7を実行している小さなオーディエンスがいます、あなたは本当にまだそれらを無視することはできません.

（画像ソース：github）

最後のセクションで述べた条件付きコメントは、ページの領域を再フォーマットするのに役立ちます。たとえば、JavaScriptを使用してのみ表示されるIE6のサブナビゲーション付きのドロップダウンメニューがある場合は、CSSをフォールバックメソッドとして使用すると運が悪くなります。代わりに、最良の解決策は各サブリストをナビゲーションブロックとして表示することです。.

上記のコードをドキュメントヘッダーに追加すると、各サブナビゲーションの表示タイプを指定できます。このフォールバックの最良の部分は、JavaScriptが有効になっているときにCSSを上書きしてもメニューを動的に表示/非表示にできることです。それ以外の場合は、リンクのオープンリストを表示するだけです。私が以下に追加したものと同じようなコードを使用できます。.

#nav li 役職：相対;幅：150ピクセル。 / * IEの有限幅を設定する必要があります* /＃nav li ul / * sub-nav codes * / display：block;位置：絶対幅：自動。 / *自分の幅を定義するか、li要素で設定します。* / #nav li ul li width：100％;

4.従来のIEの不透明度/透明度

Internet Explorerの多くの厄介なバグの1つは、不透明度への対処です。 CSS3のアルファ透明度設定は、opacityプロパティで変更できます。しかし、Microsoftの邪魔になるのは、現在Internet Explorer 9だけがこの機能をサポートしています。.

IE6 +をターゲットにするための最良の解決策は、 フィルタ, IEによってのみ認識される独自の設定。下記の簡単なコード例をチェックしてください。

.mydiv 不透明度：0.55; / * CSS3 * / filter：アルファ（不透明度= 55）。 / * IE6 + * /

あなたがする必要があるのは、透明性を必要とするあらゆる要素の中に上記の行を含めることです。 CSS3プロパティと同様に、すべての子要素もこの不透明度の変更を継承します。特にIE8をターゲットにした新しい方法を探しているなら、以下のコードをチェックしてください。これは、私たちのfilterプロパティがMicrosoft IE 8パーサによってのみ認識されるのと同じように振る舞います。.

-ms-filter： "progid：DXImageTransform.Microsoft.Alpha（opacity = 55）"; / * IE8 * /

5.フォールバックイメージを含むCSS3ボタンを作成する

ボタンはあらゆる種類のインターフェースにとって素晴らしいWeb要素です。それらはフォーム入力、ナビゲーションアイテム、あるいは直接ページリンクとしても振る舞うことができます。 CSS3では、背景のグラデーション、ボックスの影、丸みを帯びた角など、さまざまなスタイルのボタンをフォーマットできるようになりました。.

ただし、すべての訪問者がこれらの新しいプロパティをレンダリングできるとは限りません。ボタン（または同様のUI要素）の代替デザインを構築するときには、2つの異なるオプションがあります。 1つ目は、CSSの外観とまったく同じようにデザインされた背景画像を含めることです。これはPhotoshopで簡単に実現できます。しかし、あなたがソフトウェアの専門家でないなら、これは面倒かもしれません。.

代替方法は、無地の背景色とより単純なCSSスタイルにフォールバックすることです。私はCSS-TricksのCSS3グラデーションに関する素晴らしい記事のコード例をいくつか使用しています。 Safari、Firefox、Chrome、さらにはOperaを含むすべての主要ブラウザがこれらのプロパティをサポートしています。問題に遭遇する分野は、レガシーブラウザのサポートにあります。古いMozillaエンジン、IE6 / 7、さらにはMobile Safariさえも.

.gradient-bg 背景色：＃1a82f7; / *最悪の場合*単色を使用する* / background-image：url（ 'https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'）; background-image：-webkit-gradient（線形、0％0％、0％100％、（＃2F2727）から（＃1a82f7）まで）; background-image：-webkit-linear-gradient（トップ、＃2F2727、＃1a82f7）;背景画像：-moz-linear-gradient（top、＃2F2727、＃1a82f7）; background-image：-ms-linear-gradient（トップ、＃2F2727、＃1a82f7）;背景画像：-o-linear-gradient（top、＃2F2727、＃1a82f7）;

ソース

フォールバック方法として画像を単独で使用することに関する唯一の小さな問題は、ユーザーがボタンをクリックしたときにアクティブな状態が変化しないことです。これらの通常の状態とアクティブ状態の2つの異なる画像を作成することができますが、余分な作業が必要になります。この理由だけで、フォールバックイメージの代わりに純色の背景色を使用するように促される場合があります。いくつかの異なる解決策を試して、どちらがレイアウトに最適かを確認してください。.

6.モバイルコンテンツの確認

2012年のもう一つの大きなトレンドは、モバイルインターネット閲覧の人気です。スマートフォンはいたるところにあり、3G / Wi-Fi経由のデータはますますアクセスしやすくなっています。そのため、多くのデザイナーがモバイルユーザーに代替レイアウトを提供しようとしています。.

いくつかの人気のあるモバイルWebブラウザはデスクトップ環境に似たページをレンダリングするでしょう。 Mobile SafariとOperaはこれに関して最もよく知られており、多くの一般的なjQueryスクリプトをサポートしています。しかし、これらのページは常にモバイル向けではないため、UX上で拡張する余地があります.

モバイルブラウザを検出して代替のレイアウトまたはスタイルシートを表示する方法は2つあります。 1つ目は、フロントエンドツールとしてうまく機能するJavaScriptによるものです。私が以下に追加したスクリプトは非常に単純で、iPhone / iPod Touchユーザーのみをチェックします。モバイルブラウザの検出は、代わりに実行できるより詳細なスクリプトを提供する素晴らしいWebサイトです。.

// iPhone / iPod Touch関数のリダイレクトisiPhone（）return（（navigator.platform.indexOf（ "iPhone"）！= -1）||（navigator.platform.indexOf（ "iPod"）！= -1））; if（isiPhone（））window.location = "m.yourdomain.com";

もう1つの選択肢は、PHPなどのバックエンド言語を介してチェックすることです。として知られている変数をチェックすることができます HTTP_USER_AGENT. あなたがこれらの用語をグーグルするならば、何十ものウェブサイトが現れるでしょう。ただし、前の段落で追加した[モバイルブラウザの検出]リンクをお勧めします。.

このサイトには、PHPだけでなく、他にもたくさんの人気のあるバックエンド言語を解析するための無料でダウンロード可能なスクリプトがあります。これらには、ASP.NET、ColdFusion、Rails、Perl、Python、さらにはIISやApacheなどのサーバーベースのコードも含まれます。.

7.グレイスフルフォールバック付きSliceboxスライダー

2011年の私のお気に入りのCSS3景品は、おそらくCodropsが発表したSlicebox 3D Image Sliderでしょう。それは現在グーグルクロムとサファリの最新でそれらをサポートするブラウザでそれを美しいCSSアニメーション移行を利用する。最新のFirefoxやIE9のリリースでさえまだこれらの遷移を使用できないのは奇妙なことです.

このコードの最も良いところは、イメージ間の基本的なトランジション効果を提供するために、まだフォールバックすることです。アニメーションの大部分はjQueryを介して実行されますが、標準CSSフォールバックオプションは、派手なCSS3アニメーションをサポートできないブラウザの数を考えると、依然として非常に信頼性があります。.

代わりに、Codropsは最近さらにもっと創造的なCSS3技術を利用する別のスライディングイメージパネルをリリースしました。この画像スライダはCSSの背景画像を使用して作成されているので、トランジション効果がなくても非常にスムーズに動作します。.

8. jQueryスクリプトCDNフェイルセーフメソッド

jQueryライブラリは、Web上でJavaScriptを開発するためにほとんど不可欠になりました。他の多くのCDNサプライヤは、jQueryのすべてのリリースバージョンをホストする静的URLを作成しました。グーグル、マイクロソフト、そしてjQuery自身さえも、他のいくつかのあまり知られていないウェブサイトの中で、開発者のためのCDNポータルを作成しました.

これらのプロバイダに依存している何十万もの開発者がいるかもしれません。何らかの理由でリンクが切断された場合や、サーバーがオフラインになった場合はどうなりますか？ローカルコピーをホストして、必要な場合にのみこれを実装することをお勧めします。 CSS-Tricksの素晴らしいフォールバックコードスニペットを使えば、まさにそれを実現できます。!

ソース

9.独自のHTML 5チェックボックス

HTML5は、Webサイトを構築するためのいくつかの新鮮でクールなスタイルへの扉を開きました。この強化されたWebエクスペリエンスの一部は、フォームと入力要素によるものです。チェックボックスはほんの一例ですが、ニーズに合わせてカスタマイズすることができます。.

私は2011年春にポストバックされたこの素晴らしいCSS / jQueryチュートリアルに遭遇しました。それはあなたのチェックボックスのためにAppleスタイルのスイッチを作成する簡単な方法を提供します。このコードでは、背景画像を使用してユーザー操作の間のオン/オフスタイルを置き換えます。.

元の入力チェックボックス要素はデフォルトで非表示になっており、それらの値はJavaScript呼び出しによって決定されます。これはjQueryを通していつでも動的に値を引き出すことができることを意味しますが、それはまたヒットするとフォームに渡されるでしょう。 “提出する” ボタン.

JavaScriptが無効になっているか、古いブラウザではサポートされていないと仮定すると、スクリプトはデフォルトの通常のHTML入力になります。これにより、新しいチェックボックススタイルのCSSも無効になり、何も変更されていないように見えます。このスクリプトは、何よりもクリーンな後退を伴う審美的なフロントランナーのように動作します。しかし、これらのスライダーは素晴らしく見えます、そして同じテクニックが選択メニューやラジオボタンのような他のフォーム入力フィールドに適用されるかもしれません.

10. HTML 5対応ビデオ

新しいHTML 5の仕様は多くの分野で非常に進歩的です。ビデオとオーディオの両方の要素で、多数のメディアファイルに対するネイティブサポートが強化されています。しかし、HTML5をサポートしているブラウザ間では、ファイルの種類が一致していないことがわかりました。.

Mozilla Firefoxは通常、VLCをコンバータとして使用できる.OGGビデオをサポートしています。 Google Chrome＆Safariは、.MP4またはH.264でエンコードされた.MOVファイルを探します。これらの違いのために、あなたは通常含まなければならないでしょう三さまざまなビデオフォーマット - 上記の2つと.FLVフォールバック.

ありがたいことに、本当に賢い人たちがVideoJSと呼ばれるライブラリをまとめました。これは、1つのタグでFlashとHTML5ビデオの単一の実装を可能にする非常に小さいJavaScriptビルドです。無料でダウンロードしてオープンソースにできるので、開発者も貢献することができます。 FlashとHTML5ビデオプレーヤーはどちらも同一になるようにカスタマイズされているため、すべてのユーザーが同じエクスペリエンスを体験できます。 HTML5ビデオ埋め込みコードの例を調べてください。

ソース

同様の方法で、html5mediaプロジェクトはすべてのストリーミングメディアを1つのファイルタイプに統合する方法を提供します。残念ながらVideoJSでさえ、すべてのブラウザに最適というわけではありません。 html5mediaプロジェクトがやろうとしているのは、ブラウザの非互換性を回避して、すべてのプラットフォームであらゆる種類のビデオファイルをサポートすることです。そしてそれは実際にはかなりうまくいきます!

結論

この有用な代替方法のガイドが世界中のWeb開発者にとって役に立つことを願っています。さまざまなソフトウェア仕様に適応するのは、Webサイトを構築するのが困難な場合があります。 CSSやJavaScriptなど、さまざまな言語で作業している場合は特にそうです。.

しかし、トレンドは、私たちがWebデザインにおいてより支持的な時代に近づいていることを示しています。これまでにないほど多くのブラウザやWeb標準が合意されたことはありません。特にCSS3とHTML5の間ではそうです。これらのテクニックは、標準に準拠したWebページを作成するときに考慮する必要があるもののほんの一部です。ウェブ開発者として、あなたは常に最新のデザイントレンドをフォローし、あなたのオーディエンスに最も合うように適応したいと思うでしょう。.