Essential HTML, CSS and JavaScript techniques

Darcy Clarke dives into a latest HTML, CSS and JS expansion techniques to support your workflow

This essay initial seemed in emanate 234 of .net repository – a world’s best-selling repository for web designers and developers.

A technique, during a core, is a approach to lift out a charge and, being frontend developers and designers, we have a lot of tasks. That said, we mostly forget how many this landscape has changed. From 2002 to 2010 a village was decaying with formula and apparatus bloat, opposition opening and maintainability. To overcome this, we combined a slew of tips, tricks and hacks we dubbed ‘technique’. We were still accomplishing tasks, usually not in a many fit manner.

Doing a 360, a final few years have seen improved standards and standards implementations open to life, enabling us as a village to rise newer and some-more modernized ‘techniques’. This new landscape is what’s deliberate a ‘modern web’.

As ‘Web 2.0’ became low and confusing, so too will a ‘modern web’. Give it time. That said, for now, we can use and abuse a tenure so prolonged as there is a common bargain of what it represents.

In 2010 the HTML5 preference landed, providing a formula new, semi-standardised web environment. Browsers such as Opera, Firefox, Chrome and Safari embraced this new call and pushed their dev teams to new boundary of standards implementations and API exploration. To give we an thought of how ‘onboard’ these browsers are, check www.html5readiness.com’s visualisations of changing HTML5 support.

Don’t be disturbed about a miss of support in Internet Explorer. We can fight this interjection to Google Chrome Frame. Since Google introduced it in 2010 it’s turn a go-to support resource for Internet Explorer. All versions of IE can be targeted with Chrome Frame, that prompts a new user to download a plug-in that renders opted-in websites with a lightweight chronicle of Chrome, inside IE. To exercise Chrome Frame we supplement a following meta tab within a site’s conduct tag.

1.   <meta http-equiv=”X-UA-Compatible“ content=” chrome=1“ />

From here we can prompt IE users to download a plug-in, if not already installed, using JavaScript:

1. <script type=”text/javascript“ src=”http://ajax.
2. googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
3. min.js“></script>
4. <script>
5. window.onload = function(){
6. CFInstall.check({
7. mode: ”overlay“,
8. destination: ”http://www.yourdomain.com“
9. });
10. };
11. </script>

>>destination can be set to send a user to a certain couple after installing a plug-in. A word of caution: yet Chrome Frame gives us a process to rise particularly for truly complicated browsers, we mustn’t forget that a user has a choice of not downloading a plug-in if they don’t wish to. If they don’t, and we are compulsory to yield support for one or other opposite versions of IE, you’ll have to spend some some-more time anticipating out what we can and can’t provide, with your experiences, cross-browser.

With this formula providing a intensely some-more turn personification domain on that to rise on a complicated web stack, we can pierce brazen with a minds during ease. You might remember carrying to emanate a series of browser-specific hacks to get your site structured right cross-browser, formulating a large series of dull elements to be used with your sliced images, or even essay overly prolix or surplus JavaScript formula to get a simplest of functionality to work. All these heedfulness are, in some sense, a same problems we worry about today. We’re still fighting for some-more control and improved collection to fight layout, character and functionality though on a turn that’s mature.

Layout

Clearfix

Floating an component was introduced behind in CSS 2.1 though never utterly incited out to be a finish resolution we had hoped. One of a biggest problems was progressing a primogenitor element’s measure when a child component was floated. To residence this, a clearfix technique was created.

Take a following HTML:

1. <div class=”wrapper clearfix“>
2. <div class=”left”>…</div>
3. <div class=”right”>…</div>
4. </div>

This technique was created by Nicolas Gallagher:

1. .clearfix:before,
2. .clearfix:after {
3. content: ” “;
4. display: table;
5. }
6. .clearfix:after {
7. clear: both;
8. }
9. .clearfix {
10. *zoom: 1;
11. }

>>If we use HTML5Boilerplate to flog off your projects, afterwards you’ll already have this chronicle of a clearfix technique baked in.

Box-sizing

For years developers debated that box indication doing done some-more sense. Quirks vs Standards mode unequivocally meant: ‘should an element’s measure change, after being set, when borders and stuffing are applied, or not’. It’s now widely concluded that it creates some-more clarity for borders and stuffing to take divided from a accessible space within an element, and not supplement to a element’s breadth or height. The discuss has been done irrelevant with a widespread doing of box-sizing. The browser will take a cues from we instead of clamp versa.

Popularised by Chris Coyier and Paul Irish, an all-encompassing technique can be implemented with a following:

1. * {
2. -webkit-box-sizing: border-box;
3. -moz-box-sizing: border-box;
4. box-sizing: border-box;
5. }

>>Using a * selector in CSS has been debated, due to intensity opening hits. These kinds of claims are whimsical if we aren’t hyper-optimising all other aspects of your website/app. Using border-box will make a browser supplement stuffing and borders inside a accessible space set. ‘Standards Mode’ can be used by sourroundings box-sizing to content-box.

Multi-columns

The web was severely desirous by created form and type. Unfortunately, we got stranded during a vellum phase. Some of these issues are entrance to a conduct with prolonged awaited Paged-Media and CSS Regions specifications. That said, a initial stairs toward some-more magazine-like layouts were taken when browsers began implementing CSS multi-columns. The formula to beget this outcome is rather straightforward:

1. p {
2. -webkit-column-count: 2;
3. -moz-column-count: 2;
4. column-count: 2;
5. }

>>You can learn some-more about a CSS3 multi-column specification, as good as a JavaScript fallback that we can use for any browser though support, from A List Apart’s blog.

Calculations

Calculating measure can be hard. Back in a aged days, we had no approach of doing any kind of section calculations, let alone churned section calculations. That’s all altered interjection to calc. Creating a padded outcome that doesn’t impact a initial elements breadth or utilize something like box-sizing:border-box; was, until recently, usually probable by adding additional containing elements.

1. .padded {
2. margin: 0 auto;
3. position: relative;
4. width: -webkit-calc(100% - (20px * 2));
5. width: -moz-calc(100% - (20px * 2));
6. width: calc(100% - (20px *2));
7. }

>>calc() takes caring of a correct breadth calculation formed on .padded’s primogenitor breadth and reduction a tangible 20px padding. we double this by 2 for possibly side of my element, centring a component utilising relations positioning and a left and right domain auto.

Style

Transparency

Getting a right character of an component has always been contingent on a kind of collection we’ve had accessible to us in CSS. Transparency is one of a initial support variants we would run into in a early to mid-2000s.

With a appearance of HTML5 and some-more focused standards efforts, browsers have a customary doing of a opacity property, and have unprotected alpha channel support as per a new Color Module specification. This includes RGBA and HSLA guidelines.

1. a {
2. color: rgba(0,255,0,0.5);
3. background: rgba(0,0,255,0.05);
4. border: rgba(255,0,0,0.5);
5. }

>>You can use RGBA or HSLA colours wherever you’d find HEX values. There’s also an extended list of fun colours with tangible names we can check out right in a specification. These come in accessible when we wish to emanate a energetic mix between elements.

Filters

CSS filters are intensely exciting. Having a ability to boldly change a demeanour and feel of elements on a page though a need for third celebration plug-ins is amazing, and will assistance to vastly revoke your time spent in Photoshop.

1. <img src=”market.jpg“>
2. img {
3. -webkit-filter: grayscale(100%);
4. }

>>CSS filters are usually now upheld in WebKit browsers so their use should be of a addition nature, not dependent.

Image replacement

Replacing calm with images has been around for a prolonged time. Unfortunately, there are still drawbacks, accessibility-wise, to a latest and many worldly picture deputy techniques. But dual have recently come to light that are intensely clever, and singular in their possess rights. The initial was created by Scott Kellman:

1. <h1 class=’hide-text’>My Website’s Logo</h1>
2. .hide-text {
3. text-indent: 100%;
4. white-space: nowrap;
5. overflow: hidden;
6. }

The second was created by Nicolas Gallagher:

1. .hide-text {
2. font: 0/0 a;
3. text-shadow: none;
4. color: transparent;
5. }

Responsive video

Getting media to rightly scale in a manageable sourroundings can be challenging. With some-more and some-more websites respecting adaptive design, it’s essential to hoop elements’ measure and aspect ratio properly.

Embedded video has been one of a some-more severe media forms to contend since of a approach in that third-party services offer adult a content. A standard YouTube hide looks something like this:

1.  <iframe width=”640“ height=”390“ src=”http:// www.youtube.com/embed/oHg5SJYRHA0” frameborder=”0“ allowfullscreen=”"></iframe>

The iframe component afterwards contains a Flash intent or hide element. Using something like iframe { maxwidth: 100%; } will not work since a nested elements do not resize scrupulously when a breadth changes. So, we have to do some trickery.

1. <div class=”video“>
2. <iframe width=”640“ height=”390“ src=”http://www.youtube.com/embed/oHg5SJYRHA0” frameborder=”0“ allowfullscreen=”"></iframe>
3. </div>

>>Wrapping a iframe in another component will give us a control we need to supplement correct manageable functionality to a video.

1. .video {
2. position: relative;
3. padding-bottom: 56.25%;
4. height: 0;
5. overflow: hidden;
6. }
7. .video iframe,
8. .video object,
9. .video embed {
10. position: absolute;
11. top: 0;
12. left: 0;
13. width: 100%;
14. height: 100%;
15. }

>>Setting a .video wrapper’s padding-bottom: 56.25%; is a sorcery in this method. Using stuffing means a commission used will be formed on a parent’s width; ‘56.25%’ will emanate a 16:9 aspect ratio. Do a maths yourself, if we want. 9 / 16 = 0.5625. 0.5625 * 100 = 56.25 (this is a per cent).

Functionality

Easily selecting elements

With a recognition of a series of JavaScript libraries (jQuery, for example), a ECMAScript cabinet and W3C standards took note of one of a core pieces of functionality developers lacked natively – good component selection. Methods such as getElementByID() and getElementByClassName() were quick though not as stretchable and strong as a selector engines entrance from a developer community; querySelectorAll() was a standards body’s approach of mimicking some of that coherence in a local selector method.

1.  var items = document.querySelectorAll(‘#header .item‘);

>>querySelectorAll() can be upheld churned and churned selectors. 

Creating new arrays

Iterating over an array is something that’s turn uninteresting to write. Writing and rewriting for() loops isn’t fun. In JS chronicle 1.6 a map() process landed providing support for an easy approach to iterate over and emanate a new array from another.

1. var people = ['Heather','James','Kari','Kevin'];
2. var welcomes = people.map(function(name){
3. return ’Hi ‘ + name + ‘!‘;
4. });

Running this code, if we were to console.log(welcomes) you’d see welcomes is a new array [ ‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].

Clean request and window objects

Third celebration JavaScript libraries are disposed to messing with local request and window objects. This can be a problem for other third celebration libraries, and a developer including them. As possibly party, safeguard you’re operative with a purify chronicle of both objects by formulating a new instance of them. The best approach to do this is by formulating an iframe element, inserting it into a DOM and storing a new instances of those objects.

1. var iframe = document.createElement(‘iframe‘);
2. iframe.style.display = ”none“;
3. iframe = document.body.appendChild(iframe);
4. var _window = iframe.contentWindow;
5. var _document = iframe.contentDocument ||
6. iframe.contentWindow.document;
7. document.body.removeChild(iframe);

Though there have been large improvements to a web stack, stability to turn out and sophisticate a record apartment to accommodate a hurdles we face within a project’s layout, character and functionality is still hugely important. To say a good ecosystem of expansion we contingency inspire standards bodies and browser vendors to continue swell with new specifications and innovative underline implementations while pity a possess believe with associate developers and designers. More insights, reduction hacks.
Find 35 tip examples of Javascript during a sister site, Creative Bloq.