HTML by standards
Hi Habr!
Initially I wanted to name the article “HTML according to GOST ʻu,” but then it turned out that the majority of programmers did not have the subject “Metrology and Standardization” and about “standardization”, “certification”, and “unification” not all heard.
In i-Free, I do a lot of web application development. And since there are many of them, they are different and work in different conditions, then of course you have to think about standardization. There is such a project “Bulletproof HTML5” ( http://html5boilerplate.com/ ), in which the developers decided to create the perfect page template. I really liked him, and I started all my projects with him. But, correcting the bug behind the bug, making more and more new applications, I came to the conclusion that a lot is missing in it. In this article, I would like to tell you about what they usually miss when writing pages and web applications and to show what and why I pumped my blank page template.
Pointer to language:
This comes in conjunction with hyphens in CSS. Thus, the browser can more correctly arrange hyphenation.
We remove the ability to scale:
This is especially useful on phones with Bada OSes, which can wait for the page to load and simply multiply the resolution by 2. We also disable zoom, since In applications, there is usually no zoom.
')
Another tag for the above problem:
Indicator of the fact that the page uses markup optimized for mobile devices. Requests the document to be displayed without automatic scaling.
We prohibit caching the document:
It helps on some devices to get rid of inadequate attempts to restore the page. That is, attempts are adequate, but not all devices restore the page without bugs.
Mobile Internet Explorer allows you to forcibly activate ClearType technology for font smoothing:
Do not forget to add pictures for Apple devices:
This meta tag is required for the application to open in full screen mode:
Well, adjust the top strip in the iPhone:
Well, Windows 8 takes a cue from the iPhone. Additional markup for description:
Additional markup for a link to the application in the menu:
Additional settings for the window. Apparently, this is such a reference to the HTA, which did not go:
We ask IE to switch to the last mode:
Turn off the panel work with images:
We ask IE to make everything in a classic style without considering the current theme of the operating system:
We prohibit the recognition of phone numbers and addresses, as well as the allocation of them:
For a regular web page, it is better to insert a set of CSS styles describing the phone and address, and not to block their recognition.
Full set for SEO:
Recently, they too began to forget about him, but he can help if the application is on any site online.
Be sure to throw off the default styles:
I have changed my reset a bit. He set the background for the TD tag, and this caused a bug in old IE, if we fill the entire line through the TR tag
Add a set of its standard styles:
And they take into account some more nuances. For example, remove the selection in CSS:
But we leave it for text input fields:
Let me remind you once again that I mainly write web applications in which the user should not allocate anything. On the usual site to prohibit the selection of the text can not be.
Putting a border in pictures is usually not forgotten, since it is in reset.css, but the vertical-align is skipped:
I also have a standard animation class to keep my eyes going:
You can copy it as needed for buttons, tabs, etc. The bottom line is that when it constantly catches your eye, the connection of the animation becomes something natural. You don’t need to remember about it as a feature that you need to remember to connect.
And in these styles I color the plate that always goes above the HTML template:
And of course, for the sake of your favorite IE, we will add at the very beginning:
With this line, we ask him not to show us a sign that scripts are dangerous, etc. etc., and just take and turn on JS
Well, styles for portrait and landscape orientation:
If you translate to HTA, there is such an insert:
Here are the parameters for the HTA file (for example, the presence of the system menu, no scroll, etc.). And also added a JS file (by default it is commented out):
His task is to compress the window and center it in the middle of the screen (if, of course, it is possible).
Well, with this probably already familiar?
We run on the new HTML5 tags and re-create them for old IE.
Well, we are pumping Android
For example, we remove the address bar from them. For this:
This hack on Android `disappears address bar. And you can also finish the touch, Ivan Chashkin talked about this at DUMP-2014 (and there is also an article http://habrahabr.ru/company/mailru/blog/165213/ from Mail.ru). The bottom line is that if you redefine all touch events and make them stopPropagation, then Android `s will stop slowing down with sending events.
Please cache the application for offline work, if possible:
There was more about hyphenation and the language was there, so the full tag is:
How does the input of an ordinary person:
What does the smoker input look like:
Item Attributes:
Item Requirements:
Recommendations:
Half of these properties can be transferred to textarea . Here and auto-addition, and spelling, and voice input, hint, length limit, etc. But there are a number of additional requirements:
Layout Notes:
Progressive Enhancement and Graceful Degradation
I advise you to look at the report of Sergey Gorobtsov from Yandex about Progressive Enhancement and Graceful Degradation ( http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/ ) about how to make up so that it is good everywhere.
What else might be needed for standardization?
Also in my template, I immediately connect several ready-made modules such as replacing standard alert `s, adding auto-scrolling from the side (like on a habr or VKontakte), etc. But these are bikes that go beyond the article.
But this standard bike can be useful. Standard footer on micromarking:
On the other hand, all search engines have it in the documentation, but no one supports it. I use this footer because you never know, may in the future begin to use.
That's probably all. Those who mastered - a small bonus:
In the demo you can see all the meta tags from the article.
Initially I wanted to name the article “HTML according to GOST ʻu,” but then it turned out that the majority of programmers did not have the subject “Metrology and Standardization” and about “standardization”, “certification”, and “unification” not all heard.In i-Free, I do a lot of web application development. And since there are many of them, they are different and work in different conditions, then of course you have to think about standardization. There is such a project “Bulletproof HTML5” ( http://html5boilerplate.com/ ), in which the developers decided to create the perfect page template. I really liked him, and I started all my projects with him. But, correcting the bug behind the bug, making more and more new applications, I came to the conclusion that a lot is missing in it. In this article, I would like to tell you about what they usually miss when writing pages and web applications and to show what and why I pumped my blank page template.
Pointer to language:
<html lang="ru-RU"> This comes in conjunction with hyphens in CSS. Thus, the browser can more correctly arrange hyphenation.
p { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } We remove the ability to scale:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/> This is especially useful on phones with Bada OSes, which can wait for the page to load and simply multiply the resolution by 2. We also disable zoom, since In applications, there is usually no zoom.
')
Another tag for the above problem:
<meta name="HandheldFriendly" content="True"/> Indicator of the fact that the page uses markup optimized for mobile devices. Requests the document to be displayed without automatic scaling.
We prohibit caching the document:
<meta http-equiv="Cache-Control" content="no-cache"/> It helps on some devices to get rid of inadequate attempts to restore the page. That is, attempts are adequate, but not all devices restore the page without bugs.
Mobile Internet Explorer allows you to forcibly activate ClearType technology for font smoothing:
<meta http-equiv="cleartype" content="on"/> Do not forget to add pictures for Apple devices:
<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"/> This meta tag is required for the application to open in full screen mode:
<meta name="apple-mobile-web-app-capable" content="yes"/> Well, adjust the top strip in the iPhone:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> Well, Windows 8 takes a cue from the iPhone. Additional markup for description:
<meta name="application-name" content="Title"/> <meta name="msapplication-tooltip" content="Description"/> Additional markup for a link to the application in the menu:
<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"/> Additional settings for the window. Apparently, this is such a reference to the HTA, which did not go:
<meta name="msapplication-window" content="width=400;height=300"/> We ask IE to switch to the last mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> Turn off the panel work with images:
<meta http-equiv="imagetoolbar" content="no"/> We ask IE to make everything in a classic style without considering the current theme of the operating system:
<meta http-equiv="msthemecompatible" content="no"/> We prohibit the recognition of phone numbers and addresses, as well as the allocation of them:
<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="address=no"/> For a regular web page, it is better to insert a set of CSS styles describing the phone and address, and not to block their recognition.
Full set for 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"> Recently, they too began to forget about him, but he can help if the application is on any site online.
Be sure to throw off the default styles:
<link href="css/reset.min.css" rel="stylesheet" type="text/css"/> I have changed my reset a bit. He set the background for the TD tag, and this caused a bug in old IE, if we fill the entire line through the TR tag
Add a set of its standard styles:
<link href="css/default.css" rel="stylesheet" type="text/css"/> And they take into account some more nuances. For example, remove the selection in 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; } But we leave it for text input fields:
input, textarea { -moz-user-select: text; -o-user-select: text; -khtml-user-select: text; -webkit-user-select: text; user-select: text; resize: none; } Let me remind you once again that I mainly write web applications in which the user should not allocate anything. On the usual site to prohibit the selection of the text can not be.
Putting a border in pictures is usually not forgotten, since it is in reset.css, but the vertical-align is skipped:
img { border: 0; vertical-align: top; } I also have a standard animation class to keep my eyes going:
.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; } You can copy it as needed for buttons, tabs, etc. The bottom line is that when it constantly catches your eye, the connection of the animation becomes something natural. You don’t need to remember about it as a feature that you need to remember to connect.
And in these styles I color the plate that always goes above the HTML template:
<noscript class="no_script_message"> JavaScript. . JavaScript. </noscript> And of course, for the sake of your favorite IE, we will add at the very beginning:
<!-- saved from url=(0014)about:internet --> With this line, we ask him not to show us a sign that scripts are dangerous, etc. etc., and just take and turn on JS
Well, styles for portrait and landscape orientation:
<link href="css/portrait.css" rel="stylesheet" media="all and (orientation:portrait)"/> <link href="css/landscape.css" rel="stylesheet" media="all and (orientation:landscape)"/> If you translate to HTA, there is such an insert:
<!-- 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 /> --> Here are the parameters for the HTA file (for example, the presence of the system menu, no scroll, etc.). And also added a JS file (by default it is commented out):
<script src="js/hta.js"></script> His task is to compress the window and center it in the middle of the screen (if, of course, it is possible).
Well, with this probably already familiar?
<script src="js/html5.js"></script> We run on the new HTML5 tags and re-create them for old IE.
Well, we are pumping Android
<script src="js/android.js"></script> For example, we remove the address bar from them. For this:
- Take the height of the page and increase it by two
- Scroll up to 1px from above
- Return the height to its original position
This hack on Android `disappears address bar. And you can also finish the touch, Ivan Chashkin talked about this at DUMP-2014 (and there is also an article http://habrahabr.ru/company/mailru/blog/165213/ from Mail.ru). The bottom line is that if you redefine all touch events and make them stopPropagation, then Android `s will stop slowing down with sending events.
Please cache the application for offline work, if possible:
<html manifest="default.appcache"> There was more about hyphenation and the language was there, so the full tag is:
<html manifest="default.appcache" lang="ru-RU"> How does the input of an ordinary person:
<input type="text" id="name"> What does the smoker input look like:
<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 /> Item Attributes:
- placeholder - hint for input
- maxlength - limit the number of characters entered
- spellcheck - spell checker
- autocorrect - automatic correction of written
- autocapitalize - automatic case conversion
- x-webkit-speech - voice input
Item Requirements:
- The type of the element must match the type of data entered. If this is a password field, it must be of type password. The characters entered must be replaced with asterisks.
- The element should be accompanied by an example of what data is required to enter.
- The element should prompt the user for input data on the fly.
- The element must check spelling errors.
- The maximum input length should be limited.
- If this is a field for entering a new password, you must add the "auto-generate password" button. When pressed, a random password is generated.
- The element must contain a pattern attribute indicating the expected data type.
- When JavaScript is running, user input must be checked on the fly. If the data failed validation, you must immediately notify the user.
Recommendations:
- If this is a password entry field, you need to add a “see password” button (usually formed as an “eye”), by pressing which field type becomes text, and the user can verify the entered data.
- If you can auto-fill the field, it must be used. Alternatively, place a button near the element, which, when clicked, will trigger an auto-fill.
- Depending on the situation, it is sometimes possible to use “autocorrection” and delete forbidden characters on the fly. The danger of this situation is that the user may not notice the correction and send data that is different from what he wanted to enter.
Half of these properties can be transferred to textarea . Here and auto-addition, and spelling, and voice input, hint, length limit, etc. But there are a number of additional requirements:
- Resizing the field should be prohibited (resize: none in CSS)
- If this is the input of a message, you need to inform the user about how many characters he can still enter.
Layout Notes:
- The perfect layout should survive somewhere in the IE6 area. We try to use inline-block as little as possible. We look in advance what will happen if it becomes an inline or block element.
- Position is dangerous. It is advisable not to position anything anywhere.
- Float - also does not lead to good. It is desirable to forget about him at all.
- The design should immediately provide the possibility that a particular fragment may fall off. In this regard, the perfect style Metro. Somehow even came up with the idea that Microsoft specifically made this style, in which there are no round corners, no gradients, no shadows. That is, the guys immediately pushed away from their browser so that no one could accuse them of bugs.
Progressive Enhancement and Graceful Degradation
I advise you to look at the report of Sergey Gorobtsov from Yandex about Progressive Enhancement and Graceful Degradation ( http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/ ) about how to make up so that it is good everywhere.
What else might be needed for standardization?
- The comb for CSS ( http://csscomb.ru/online/ ) will help everyone to take a single look.
- Andrei Sitnik’s autoprepreter will help finish off CSS prefixes ( http://habrahabr.ru/company/evilmartians/blog/176909/ )
- Such a script ( http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip ) will help to generate a bunch of images (requires an installed imagemagick)
Also in my template, I immediately connect several ready-made modules such as replacing standard alert `s, adding auto-scrolling from the side (like on a habr or VKontakte), etc. But these are bikes that go beyond the article.
But this standard bike can be useful. Standard footer on micromarking:
<!-- 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> On the other hand, all search engines have it in the documentation, but no one supports it. I use this footer because you never know, may in the future begin to use.
That's probably all. Those who mastered - a small bonus:
In the demo you can see all the meta tags from the article.
Source: https://habr.com/ru/post/216045/
All Articles