Geekly Articles each Day
⬆️ ⬇️

Useful HTML, CSS and JavaScript techniques

Technique is a way to cope with a task, and we, developers and designers of the frontend, have quite a few of these methods. With this, being immersed in routine work, we sometimes do not always notice how rapidly the environment around us is changing. In the period from 2002 to 2010, the community of front-end developers was literally covered with the ulcers of the redundant code and resources, from which both the work of the sites and the convenience of their use suffered. To cope with this, we came up with a lot of hacks, gimmicks and tricks under the code name "technique". We still continue to carry out the tasks assigned to us, we just use the least efficient methods.



Turning back, we note that in the past few years, new, better standards and ways to apply them have been established, allowing us to create more advanced "techniques". This new world, opened before us, is called the “modern web”. Web 2.0, which was admired in its time, today has become confusing and stagnant for us. On the one hand, there is no doubt that a similar fate will befall what we call the modern web. On the other hand, for the time being we can use this term and abuse it as much as we like, as long as we understand what it means.



In 2010, the HTML5 standard appeared, providing a completely new, semi-standardized web environment. Browsers such as Opera, Firefox, Chrome, and Safari adopted innovations, and their developers went beyond implementing standards and learning the application programming interface. To imagine how autonomous these browsers are, you can familiarize yourself with an excellent visual demonstration of HTML5 support at www.html5readiness.com .



Now you can bypass the difficulties associated with Internet Explorer, thanks to Google Chrome Frame. Since Google introduced it in 2010, Google Chrome Frame has become the most popular addition to support HTML5 in Internet Explorer. In all versions of IE, you can add a Chrome Frame, for which it’s enough to add the following <meta> -tag in the <head> tag of our site.

') 

<meta http-equiv="X-UA-Compatible" content=" chrome=1" />


Using the following code, we can offer users of IE who do not already have this add-on, download it using JavaScript: 



 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <script> window.onload = function(){ CFInstall.check({ mode: "overlay", destination: "http://www.yourdomain.com" }); }; </script>


You may remember how you had to invent a lot of tricks for each particular browser, so that your site displayed well in them, create countless empty elements with cut images, write detailed and even redundant JavaScript codes to ensure the simplest functionality. In a sense, we are suffering now with the same problems. We are still fighting for complete control, we are looking for the best tools for “stifling” placement, style and functionality, just today it is already happening at a different level.





Infographics from www.html5readiness.com , illustrating browser support for HTML5 and CSS3 properties.



Location



Clearfix


The float property was introduced back in CSS 2.1, but it never became the panacea we hoped for. One of the main problems is maintaining the size of the parent element with a floating child. To solve it, a hack was created, known as clearfix. Take the following HTML: 



 <div class="wrapper clearfix"> <div class="left">...</div> <div class="right">...</div> </div>


The hack was written by Nicholas Gallagher : 



 .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
>> If you use HTML5Boilerplate to develop your projects, then this technique is already integrated into the environment.



Box-sizing


Developers have been arguing for years about which box model is better. The confrontation between the Quirks and Standards modes actually consists in one question, whether the dimensions of an element should change after installation when applying boundaries and filling, or not. Now everyone basically agrees on the fact that it makes sense to count the borders and fill them with part of the available space inside the element, rather than adding them to its width and height.



However, with the widespread hack on changing the size of the boxes, this dispute has lost its relevance. Now the browser will go on about you, and not vice versa. This universal technique, developed by Chris Koyer and Paul Irish , can be applied as follows: 



 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
>> The use of the selector * in CSS is often criticized for the possible performance degradation. In fact, the reduction is quite frivolous and it can be ignored, unless of course you are not over-optimizing your website / applications. Using the border-box function, the browser will add padding and borders to the inside of the available space. The 'Standards Mode' mode can be used by setting the box size to equal the size of the content.



Multi-columns


The display of textual information on the Internet was greatly influenced by the tradition of writing and printing, but that's bad luck: in this matter, he still stuck at the parchment stage. Some problems can be solved after the implementation of the long-awaited standards Paged-Media and CSS Regions. Although it must be said that the first steps with “like from magazine” arrangements were made even when browsers began to introduce CSS multicolumns. The code you need to create this effect is fairly simple: 



 p { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }


Size calculation


It is difficult to calculate the size of elements. Previously, we did not have any tools for calculating the units used in the layout, not to mention the calculation of mixed units, but everything changed thanks to calc. It creates a fill that does not affect the original width of the elements and does not use anything like box-sizing: border-box; until recently, this was possible only through the addition of additional elements. 



 .padded { margin: 0 auto; position: relative; width: -webkit-calc(100% - (20px * 2)); width: -moz-calc(100% - (20px * 2)); width: calc(100% - (20px *2)); }
>> calc () takes care of correctly calculating the width based on the width of the parent element minus a specific fill of 20px. I multiplied this by two for each side of element 2, centered the element with relative locating and set the automatic left and right frames.







Styles



Transparency


Making an element in the right style always depended on the tools that were available in CSS. Transparency is one of the first supported properties that you would have encountered in the beginning and middle of the two thousandth. With the advent of HTML5 and more effective standardization, browsers began to implement the default opacity property, and alpha channel support appeared in the new Color Module standard. It also includes manuals on the RGBA and HSLA models. 



 a { color: rgba(0,255,0,0.5); background: rgba(0,0,255,0.05); border: rgba(255,0,0,0.5); }
>> The RGBA and HSLA color models can always be used with HEX values. There you will find a long list of interesting colors and certain names that can be seen in this standard. They are useful for creating dynamic mixing of elements.



Filters


Working with filters in CSS is very interesting. Having the ability to dynamically change the look and feel of the elements on the page without any side additions is amazing, moreover, it will be possible to significantly reduce the time spent with Photoshop. 



 <img src="market.jpg"> 
 img { -webkit-filter: grayscale(100%); }
>> CSS filters are currently supported only in browsers on the webkit engine, so for now, it is better to use them as an add-on, rather than the main tool. You can read more about filters here .





CSS filters allow you to customize images on the pages directly in the browser. More examples of the set of filters available can be found here .



Image Replacement


This technique has been used for a long time, but, unfortunately, even the newest and most thought-out replacement techniques are not without flaws. However, two amazing methods have recently become popular, each of which is unique in its own way. The first one was written by Scott Kellman : 



 <h1 class='hide-text'>My Website's Logo</h1> 
 .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; }


The creator of the second method is Nicholas Gallagher : 



 .hide-text { font: 0/0 a; text-shadow: none; color: transparent; }




Scott Kellman and Nicholas Gallagher image switching method



Adaptive video


It is quite difficult to get audio-visual elements to display at the correct scale in adaptive layout. Now, when more and more sites have a self-adjusting design, it is necessary to ensure that the dimensions of the elements and the resolution are processed correctly. Embedded video is one of the most “stubborn” types of audiovisual media due to the fact that content is supplied by additional servers. Embedding a typical YouTube video looks like this: 



 <div class="video"> <iframe width="640" height="390" src="http://www.youtube.com/embed/oHg5SJYRHA0" frameborder="0" allowfullscreen=""></iframe> </div>
>> “Wrapping” an iframe into another element will allow us to apply the adaptability functionality that we need. 



 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
>> The basis of this method is the installation of wrapper's padding-bottom video: 56.25%; Using padding means that percentages will be based on the width of the parent element; '56, 25% 'will give us a resolution of 16: 9. Count yourself if you want. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (our percentage value).



Functionality



Simple selection of items


With the growing popularity of some JavaScript libraries (for example, jQuery), the ECMAScript committee and the W3C standard commission noted one of the fundamental details in the functionality that developers initially lacked: the choice of elements. Methods such as getElementByID () and getElementsByClassName () are fast, but not as flexible and reliable as selector engines from the developer community; The Standardization Commission has simulated this flexibility in the original selector method in the form of querySelectorAll (). 



 var items = document.querySelectorAll('#header .item');
>> querySelectorAll () can work with different and with many selectors simultaneously. Here you can read more about this.



Creation of new data arrays


It was very tiring to write the elements of an array. Writing and rewriting for () loops is, frankly, boring. In JS version 1.6, the map () method appeared, which supports easier iteration of the array and creation of a new array based on it. 



 var people = ['Heather','James','Kari','Kevin']; var welcomes = people.map(function(name){ return 'Hi ' + name + '!'; });
By running this code using the console.log (welcomes) function, you would see greetings in the new array ['Hi Heather!', 'Hi James!', 'Hi Kari!', 'Hi Kevin!' ].



"Cleaning" of documents


Individual JavaScript libraries often interfere with the source document and objects in the browser window. This can be a nuisance for other individual libraries as well as for the developer. In any case, try to ensure a “clean” version of all objects by creating a new copy of each. The best way to do this is to create an iframe element, insert it into the DOM model, and store new copies of these objects. 



 var iframe = document.createElement('iframe'); iframe.style.display = "none"; iframe = document.body.appendChild(iframe); var _window = iframe.contentWindow; var _document = iframe.contentDocument || iframe.contentWindow.document; document.body.removeChild(iframe);


Although many improvements have been made in the server software, it is very important to continue to complement and complete the development of our technologies in accordance with the tasks that we encounter in the light of the location, style and functionality of our projects. To maintain the growth and development of the ecosystem, it is necessary to encourage standardization committees and browser manufacturers to push progress forward by proposing new standards and introducing new features, sharing knowledge with other developers and designers. More understanding, less dancing with a tambourine.



Article translation: Essential HTML, CSS and JavaScript techniques

Source: https://habr.com/ru/post/171699/

More articles:



All Articles