Webの勉強

Web系の作業で得た知識を備忘録として記録。間違ったていたら、ごめんなさい。

クロスブラウザ対応方法

クロスブラウザの対応方法

①古いブラウザにあわせてかく ②ブラウザ毎にページをわける ③ライブラリを用意し、ライブラリ内で差分を吸収する

それぞれデメリット・メリットがある。

① メリット ・メンテナンスが楽 デメリット ・地味 ・新しい機能がつかえない

② メリット ・ブラウザが限られていれば実装工数を減らすことができる デメリット ・メンテナンスが大変

③ メリット ・プログラムの本筋とは外れたブラウザの実装の差異 に頭を悩ませなくても良い デメリット ・コードが長くなる

現在の仕事も①ですすめようかと思いましたが、③でまずはすすめる方が、将来のメンテナンス性があると思います。

参考サイト allabout.co.jp

ブラウザの判別方法

ブラウザの動作の違い

ブラウザ毎に動作がことなるのは、ブラウザに組み込まれているJavascriptエンジンの違いによります。

InternetExplorer: Chakra Chrome: V8 Firefox: SpiderMonkey

各エンジンに使える関数やプロパティに差分があるため、この差分を埋めることでクロスブラウザ対応が可能です。 ブラウザの判別方法は次の通りです。

ユーザーエージェント

ブラウザを判別する方法は、一般的なのはユーザーエージェントで判別する方法だと思います。

UserAgentからブラウザを判別する方法

参考サイト JavaScriptでUserAgentを使った判別をする | cly7796.net

条件付きコメント

条件付きコメントは、IE10以上ではつかえないそうです。

<html>
  <!--[if IE]>
    This content is ignored in IE10 and other browsers.
    In older versions of IE it renders as part of the page.
  <![endif]-->
</html>

参考サイト 条件付きコメントがサポートされなくなった (Windows)

ブログにソースコードをのせる方法について

ソースコードを表示させるブログの記述方法について、以下のサイトを参考に調べてみました。

参考サイト:

www.weblog-life.net

(1)↓編集モードをMarkDown↓で記述

<script>
alert('Hello World!');
</script>

(2)Gistのコードを埋め込む方法

サンプルコード

http://jsbin.com/gist/●●●●●●●(gist-id) と入力すれば、gist idに対応するgistのコードをそのまま表示出来ます。」ということだが、 Gist-idがなにかが不明。。

Gistに張り付けたサンプルコードの、実行結果を別タブで表示させる方法がわかればいいのですが。