🏣 🔪 👦🏽 標準による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>

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

ページの高さを取得し、2増やします
上部を1ピクセルまでスクロールします
高さを元の位置に戻す

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 />

要素の属性：

プレースホルダー-入力ヒント
maxlength-入力する文字数を制限する
スペルチェック-スペルチェック
autocorrect-書面の自動修正
autocapitalize-大文字小文字の自動変換
x-webkit-speech-音声入力

アイテムの要件：

アイテムのタイプは入力のタイプと一致する必要があります。これがパスワード入力フィールドである場合、パスワードタイプでなければなりません。入力した文字はアスタリスクに置き換える必要があります。
項目には、入力する必要のあるデータの例を添付する必要があります。
要素は、ユーザーにオンザフライで入力を促す必要があります。
アイテムはスペルミスをチェックする必要があります。
最大入力長を制限する必要があります。
これが新しいパスワードを入力するフィールドである場合、「パスワードを自動生成する」ボタンを追加する必要があります。クリックすると、ランダムなパスワードが生成されます。
要素には、予想されるデータ型を示すパターン属性が含まれている必要があります。
JavaScriptを実行する場合、ユーザーが入力したデータはその場で確認する必要があります。データが検証に合格しなかった場合は、すぐにユーザーに通知する必要があります。

推奨事項：

これがパスワード入力フィールドの場合、「パスワードを見る」ボタン（通常は「目」の形で発行されます）を追加する必要があります。クリックすると、フィールドタイプがテキストになり、ユーザーは入力データを確認できます。
フィールドに自動入力する可能性がある場合は、それを使用する必要があります。または、要素の近くにボタンを配置すると、クリックすると自動補完が機能します。
状況によっては、「自動修正」を使用して、禁止されている文字をその場で削除することができます。この状況の危険性は、ユーザーが修正に気付かず、入力したいデータとは異なるデータを送信する可能性があることです。

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

フィールドのサイズ変更は禁止する必要があります（サイズ変更：CSSではなし）
これが特定のメッセージの入力である場合、入力できる文字数をユーザーに通知する必要があります。

レイアウトノート：

理想的なレイアウトは、IE6エリアのどこかで存続するはずです。インラインブロックを最小限に使用しようとします。インライン要素またはブロック要素になった場合に何が起こるかを事前に確認します。
位置は危険です。何も配置しないことをお勧めします。
フロート-また、良いことにつながりません。彼について完全に忘れることをお勧めします。
設計では、特定のフラグメントが脱落する可能性を直ちに提供する必要があります。この点でMetroスタイルは完璧です。どういうわけか、Microsoftが丸い角、グラデーション、影のないスタイルを作ったとさえ思いつきました。つまり、彼らはすぐにブラウザから起動したため、誰もバグを非難することはできませんでした。

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

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

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

CSSの櫛（ http://csscomb.ru/online/ ）は、すべてを一見するのに役立ちます。
Andrey Sitnikの自動プレフィックスは、CSSプレフィックスを補完するのに役立ちます（ http://habrahabr.ru/company/evilmartians/blog/176909/ ）
たくさんの写真を生成するのに役立つスクリプト（ http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip ）があります（インストールされているimagemagickが必要です）

また、テンプレートでは、標準のアラートの置き換え、サイドへの自動スクロールの追加（ハブや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>

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

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

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

標準によるHTML

More articles: