Clever Geek Handbook

標準によるHTML

こんにちはHabr！



画像 当初、私は記事を「GOSTʻuによるHTML」と呼びたかったのですが、ほとんどのプログラマーは「Metroology and Standardization」という主題を持たず、「標準化」、「認証」、「統一」について誰もが聞いていませんでした。



i-Freeでは、多くのWebアプリケーション開発を行っています。 そして、それらがたくさんあるので、それらは異なっており、異なる条件で動作します。それから、標準化についてそれ自身で考えなければなりません。 このようなプロジェクト「Bulletproof HTML5」（ http://html5boilerplate.com/ ）があり、開発者は完璧なページテンプレートを作成することにしました。 私は彼が本当に好きで、彼と一緒にすべてのプロジェクトを始めました。 しかし、バグを次々と修正し、ますます多くの新しいアプリケーションを作成していくうちに、多くのバグが見つからないという結論に達しました。 この記事では、ページやWebアプリケーションの作成時に通常スキップされるものについて説明し、空白ページテンプレートをアップロードした方法と理由を示します。



言語ポインター： 

<html lang="ru-RU">


これは、CSSのハイフンとペアになっています。 したがって、ブラウザはハイフンをより正確に配置できます。 

 p { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }


スケーリングする機能を削除します。 

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>


これは、ページがロードされるのを待ち、解像度を2倍にするだけのBadaオペレーティングシステムを搭載した携帯電話で特に役立ちます。また、ズームをオフにします。 通常、アプリケーションにはズームはありません。



上記の問題の別のタグ： 

 <meta name="HandheldFriendly" content="True"/>


ページがモバイルデバイス用に最適化されたマークアップを使用することを示すインジケーター。 自動スケーリングなしでドキュメントを表示するように要求します。



ドキュメントのキャッシュを禁止します。 

 <meta http-equiv="Cache-Control" content="no-cache"/>


これは、一部のデバイスでページを復元するための不適切な試みを取り除くのに役立ちます。 つまり、試行は適切ですが、すべてのデバイスがバグなしでページを復元するわけではありません。



Mobile Internet Explorerを使用すると、ClearTypeテクノロジーを強制的にアクティブにして、フォントをスムーズにできます。 

 <meta http-equiv="cleartype" content="on"/>


Appleデバイスの写真を追加することを忘れないでください： 

 <link rel="apple-touch-startup-image" href="images/startup.png"> <link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/> <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/> <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/>


このメタタグは、アプリケーションを全画面モードで開くために必要です。 

 <meta name="apple-mobile-web-app-capable" content="yes"/>


それでは、iPhoneのトップバーを調整します。 

 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>


さて、Windows 8はiPhoneの例です。 説明用の追加マークアップ： 

 <meta name="application-name" content="Title"/> <meta name="msapplication-tooltip" content="Description"/>


メニューにアプリケーションへのリンクを配置するための追加のマークアップ： 

 <meta name="msapplication-TileColor" content="#990000"/> <meta name="msapplication-TileImage" content="images/custom_icon_144.png"/> <meta name="msapplication-square70x70logo" content="images/custom_icon_70.png"/> <meta name="msapplication-square150x150logo" content="images/custom_icon_150.png"/> <meta name="msapplication-square310x310logo" content="images/custom_icon_310.png"/> <meta name="msapplication-wide310x150logo" content="images/custom_icon_310x150.png"/>


ウィンドウの追加設定。 どうやら、これは行っていないHTAへの参照です： 

 <meta name="msapplication-window" content="width=400;height=300"/>


IEに最後のモードに切り替えるよう依頼します。 

 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>


画像パネルを無効にします。 

 <meta http-equiv="imagetoolbar" content="no"/>


IEには、現在のOSテーマを考慮せずに、すべてを古典的なスタイルで設計するように依頼します。 

 <meta http-equiv="msthemecompatible" content="no"/>


電話番号と住所の認識を禁止し、それらを強調します。 

 <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="address=no"/>


通常のWebページでは、電話と住所を説明するCSSスタイルのセットを挿入する方が、それらの認識をブロックするよりも優れています。



完全なSEOキット： 

 <title></title> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content=""/> <meta name="copyright" content="(c)"> <meta http-equiv="Reply-to" content="mail@yandex.ru">


最近、彼らも彼のことを忘れ始めましたが、アプリケーションがオンラインのサイトにある場合、彼は助けることができます。



必ずデフォルトのスタイルを削除してください： 

 <link href="css/reset.min.css" rel="stylesheet" type="text/css"/>


リセットを少し変更しました。 彼はTDタグの背景を設定しました。これにより、TRタグを介して行全体を埋めると、古いIEでバグが発生しました。



標準スタイルのセットを追加します。 

 <link href="css/default.css" rel="stylesheet" type="text/css"/>


そして、彼らはさらにいくつかのニュアンスを考慮しました。 たとえば、CSSの選択を削除します。 

 body { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(255, 255, 255, 0); outline: none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; resize: none; -webkit-text-size-adjust: none; }


ただし、テキスト入力フィールドにはそのままにしておきます。 

 input, textarea { -moz-user-select: text; -o-user-select: text; -khtml-user-select: text; -webkit-user-select: text; user-select: text; resize: none; }


主に、ユーザーが何も選択してはならないWebアプリケーションを作成していることを思い出させてください。 通常のサイトでは、テキストの選択を禁止することはできません。



通常、境界線の写真を置くことは忘れられません。 reset.cssにありますが、vertical-alignはスキップされます。 

 img { border: 0; vertical-align: top; }


また、「私の目を呼ぶ」ための標準的なアニメーションクラスもあります。 

 .animation { -webkit-transition: background-color 0.7s, color 1s, opacity 0.5s; -ms-transition: background-color 0.7s, color 1s, opacity 0.5s; -o-transition: background-color 0.7s, color 1s, opacity 0.5s; -moz-transition: background-color 0.7s, color 1s, opacity 0.5s; transition: background-color 0.7s, color 1s, opacity 0.5s; }


ボタン、タブなどの必要に応じてコピーできます。 一番下の行は、常に目を引くとき、アニメーションを接続することは自然なものになるということです。 接続する際に覚えておく必要がある機能として、これについて覚えておく必要はありません。



そして、これらのスタイルでは、常にHTMLテンプレートの上部にあるプレートに色を付けます。 

 <noscript class="no_script_message">    JavaScript.    .   JavaScript. </noscript>


そしてもちろん、最愛のIEのために、最初に以下を追加します。 

 <!-- saved from url=(0014)about:internet -->


この行では、スクリプトが危険であるなどの兆候を見せないように頼みます。 など。ただし、JSを取得して有効にするだけです。



さて、縦向きと横向きのスタイル： 

 <link href="css/portrait.css" rel="stylesheet" media="all and (orientation:portrait)"/> <link href="css/landscape.css" rel="stylesheet" media="all and (orientation:landscape)"/>


HTAに翻訳すると、次のような挿入があります。 

 <!-- Option for HTA file <hta:application id=ifree.game.sudoku applicationName=Sudoku showInTaskBar=yes caption=yes innerBorder=yes selection=no icon=images/favicon.ico sysMenu=yes windowState=normal scroll=no resize=no navigable=no contextmenu=yes /> -->


HTAファイルのパラメーターは次のとおりです（たとえば、システムメニューの存在、スクロールの不在など）。 また、JSファイルも追加しました（デフォルトではコメント化されています）： 

 <script src="js/hta.js"></script>


そのタスクは、ウィンドウを絞って、画面の中央に配置することです（もちろん、これが可能な場合）。



まあ、おそらくすでにこれに精通している？ 

 <script src="js/html5.js"></script>


新しいHTML5タグを実行し、古いIE用に再作成します。



まあ、私たちはAndroidをポンプ 

 <script src="js/android.js"></script>


たとえば、アドレスバーを削除します。 これを行うには：





Androidでこのハックを使用すると、アドレスバーが消えます。 そして、最後までやり直すことができると、Ivan ChashkinがDUMP-2014でこれについて話しました（また、Mail.ruの記事http://habrahabr.ru/company/mailru/blog/165213/もあります）。 一番下の行は、すべてのタッチイベントを再定義してstopPropagationにすると、イベントの送信でAndroidがブレーキを停止するということです。



可能であれば、オフライン作業用にアプリケーションをキャッシュしてください： 

 <html manifest="default.appcache">


ハイフネーションと言語についても詳しく説明しているため、完全なタグは次のとおりです。 

 <html manifest="default.appcache" lang="ru-RU">


一般の人の入力は次のようになります。 

 <input type="text" id="name">


喫煙者の入力は次のようになります。 

 <input type="text" autocomplete="on" spellcheck="true" autocapitalize="off" autocorrect="off" autofocus required maxlength="30" pattern="^[--\s\-\_0-9]+$" class="input_name" id="input_name" placeholder=" " x-webkit-speech />


要素の属性：





アイテムの要件：





推奨事項：





これらのプロパティの半分はtextareaに転送できます。 ここおよび自動補完、スペル、音声入力、ツールチップ、長さ制限など。 ただし、追加の要件がいくつかあります。





レイアウトノート：





プログレッシブエンハンスメントとグレースフルデグラデーション



YandexのSergey GorobtsovによるProgressive EnhancementおよびGraceful Degradation（ http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/ ）についてのレポートを見て、どこでもうまくレイアウトできるようにすることをお勧めします。



標準化には他に何が必要ですか？





また、テンプレートでは、標準のアラートの置き換え、サイドへの自動スクロールの追加（ハブやvkontakteなど）など、既製のモジュールをすぐに接続します。 しかし、これらはすでにこの記事の範囲を超えるバイクです。



しかし、この標準的な自転車は便利です。 標準のマイクロフッター： 

 <!-- SEO schema --> <footer itemscope itemtype="http://schema.org/LocalBusiness">  «<span itemprop="name">Google</span>» <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress"> 1</span> <span itemprop="addressLocality">-</span>, <span itemprop="addressRegion"> .</span> <meta itemprop="addressCountry" content="RU"/> </div>   -: <time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr, Sa, Su 10:00-21:00">10:00 - 21:00 </time> <span itemprop="telephone">206-555-1234</span>. <span itemprop="email">info@wikimedia.org</span>. <a href="http://www.google.com" itemprop="url">http://google.com</a>. </footer>


一方、すべての検索エンジンはドキュメントに含まれていますが、誰もそれをサポートしていません。 私はこのフッターを使用します 知らないかもしれませんが、将来的には使用を開始するかもしれません。



それがおそらくすべてです。 マスターした人のために-小さなボーナス：



画像



デモでは、記事のすべてのメタタグを見ることができます。


More articles:


All Articles