Frontend web developers of Mobilunity share their favorite CSS techniques.
USEFUL CSS FUNCTIONS FOR WEB FRONTEND DEVELOPMENT
In the modern world of internet-oriented business frontend developer skill set should include HTML, CSS and JavaScript programming languages in order to create a high quality web design. The best way to make the webpage interesting and user-friendly is to use modern CSS techniques. Our frontend web developers are trying to ease up the magical coding process, and told us a bit about their favorite CSS features they use in order to accomplish this. If you’d like to read not only this review, but some useful tutorials on CSS as well, check out our previous articles on how to create a cool css menu and a css book style page.
When we are talking about frontend development, JavaScript always comes to mind as the fundamental of the whole process. Yes, it is great at least for two reasons:
Preferring JS to CSS will help you when working with old browsers which don’t have the latest CSS3 support.
JavaScript helps you to handle DOM functionality which CSS doesn’t support. For example, with the help of CSS techniques you can change the color of some element on the hover of your main object, but you can’t make any changes to JS variables or logic.
Still, there are some cases, when the CSS solution is much better than JS:
HTML and CSS are loaded simultaneously in that moment, when you open the website, whereas JavaScript components are loaded only after that. This is not an issue for hover, for example, but if you connect static styles to the page, you will experience a delay between loading of HTML+ CSS and JS components.
Users often disable JS in their settings and they are usually not aware, that disabling JavaScript means, that some of the functionality you’ve planned to show, would never work, whereas CSS properties would work in any case.
The latest trends in web frontend development tools introduced us CSS3, which is basically a mixture of CSS+JS, which not only allows to write your code faster, but also ease-up the whole process for you not to create your own custom JS.
Necessary Frontend Development Tools
Flexbox
Flexbox was designed in order to create a mobile app with user-friendly interface. Initially, this CSS feature was commonly used for placing components in mobile applications, and thanks to its convenience programmers started using it in the web frontend development as well. This is why it is currently supported in all modern browsers, whether they are desktop or mobile versions, but in the IE 10 – 11 flexbox faces issues running and some properties supported only partially.
We use flexbox:
– When we need to spread elements in the container according to its width and the size of the elements themselves (in order for elements to be evenly placed in the container).
– When we need to align elements vertically. Without flex it is very hard, especially when we have several elements without static height.
Animation
Our frontend developers often use thetransform property instead of position (‘top’, ‘left’, ‘right’) or width ones, because the latter make the element redraw over and over, but using ‘transform’ makes it just move smoothly and as a result animation looks more beautiful. According to the “Can I use…” resource, this function is supported by the following versions of different browsers:
Screenshot shows in which browsers CSS3 2D Transforms are supported
Animation Keyframe
It is a great alternative to the JS animation (jQuery animate, etc), but it can turn out quite resource-consuming, especially if you have to create thousands of animations on the page, which will definitely make it browse slower, than it potentially can. It has few crossbrowser issues as well. For example, the calc() property doesn’t work in IE keyframes. Still, this alternative is regarded as quite useful in web frontend development. CSS styles, which are specified in the @keyframes rule, will make the element change gradually from one to another style version (it can be coloring, for example). Look at the simple example below:
/* The styling rule */ @keyframes triangle { from {background-color: blue;} to {background-color: yellow;} } /* The element, which will be changed */ div { height: 50px; width: 50px; animation-duration: 3s; background-color: blue; animation-name: triangle; }
The animation will last for 3 seconds, and will gradually change the background color of the <div> element from blue to yellow.
Units
While working with markups, frontend web developers often have to scale the elements depending on the browser viewport. They frequently use JavaScript for this purpose. Firstly, they check the size of the viewport, and then change the elements according to the requirement. When user changes the window size, the whole process of element’s scaling repeats automatically again. In order to set the size of the elements according to the viewport requirement, developers often use ‘rem’, ‘vh’ and ‘vw’ measuring units, where:
–rem (root em) equals the font size of the html-element.
–vh (viewport height) equals 1/100th of the viewport height and is irreplaceable while developing the full-page website. The only issue occurs on iPad in Safari, where 100vh comes over the bottom edge, because Safari doesn’t include navbar of the browser in the overall calculus.
–vw (viewport width) equals 1/100th of the viewport width. It is commonly used when it’s needed to make the resizeable website with one or more static columns.
Calc
According to the CSS-Tricks, the definition ofcalc()function is as follows:
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.
The function is simple, but very important at the same time. It is needed in order to scale the size of the element. For example, if we need to develop a full-page website with the static header, we need to use ‘calc(100vh – 200px)’, if our header has 200px height.
Overall, there are many more available CSS functions that can help you to create responsive website and make your web pages look beautiful and modern. Details are very important, when the goal is to create a user-friendly design. Keeping up with the latest coding tricks is a path to successful web development.
If you’d like to have a trendy user-focused website, contact us and we’ll provide you with our best web frontend development services!
Originally published at Mobilunity Blog.