DEV Community: nikhiltyagi04

20 Best Chrome Extensions for Developers in 2024

nikhiltyagi04 — Wed, 18 Sep 2024 06:28:26 +0000

In just over 10 years, Google Chrome has managed to conquer well over 65% of the market share — *Statcounter*. One of the key factors behind its meteoric rise is its huge library of extensions that truly sets it apart from the rest, especially for web designers and developers. However, offering a library of extensions as vast as it does, it becomes a bit troublesome for its users to handpick the extensions for their daily needs.

In this article, I am going to highlight 20 best Chrome extensions for developers and designers to boost their productivity and make their lives easier.

1. LambdaTest

LambdaTest is an AI-powered test orchestration and execution platform that provides a cloud-based platform to perform cross browser testing on 3000+ real browsers and browser versions for different devices, so you could end up with an eye-appealing, robust, and cross browser compatible website.

The platform also has its own Chrome extension. LambdaTest Chrome Extension is a handy tool for web developers and testers who want to perform quick and easy cross-browser testing directly from their Chrome browser.

Here’s a breakdown of its key functionalities:

**Cross browser testing on the cloud**: Without needing to set up virtual machines or manage multiple devices, the extension lets you launch tests on LambdaTest’s cloud platform across a vast range of browsers and operating systems. This helps identify any compatibility issues your website or web app might have on different platforms.
Real-time and screenshot testing: You can perform live, interactive testing of your website within the browser tab itself. Additionally, the extension allows you to capture screenshots of your website across various browser and OS combinations, helping ensure consistent visual rendering across platforms.
Favorites and lists: To save time and streamline your workflow, the extension lets you create lists and mark favorite configurations for browsers and operating systems you test frequently. This allows you to quickly launch tests with your preferred settings.
**Schedule screenshots**: Need screenshots at a specific time? The extension offers scheduling capabilities, allowing you to capture screenshots automatically at your designated date and time with the chosen configurations.
Geolocation testing: Test how your website behaves and renders across different geographical locations. This can be helpful for websites with regional content or those targeting international audiences.

2. LT Debug

LT Debu is a free Chrome extension for developers built by LambdaTest to supercharge their web development workflow by simplifying debugging. It provides a collection of essential debugging tools readily accessible within your Chrome browser.

Here’s what makes LT Debug a valuable asset for web developers:

Essential debugging tools at your fingertips: LT Debug offers a comprehensive set of debugging tools directly integrated into your browser. This eliminates the need to switch between different applications or browser developer tools menus.
Effortless webpage debugging: Inspect and debug any webpage on the fly. Whether it’s a website you’re building or one you’ve encountered while browsing, LT Debug empowers you to quickly diagnose issues and iterate on your code.
Enhanced developer experience: LT Debug streamlines the debugging process by providing a user-friendly interface and essential functionalities for web development. This allows you to focus on fixing problems and building great web experiences.

3. ColorZilla — Color Picker and Generator

ColorZilla is one of the oldest color picker extension launched over 8 years ago and it has successfully maintained its mantle as the best color picker and an eyedropper Chrome extension for developers or designers even today. ColorZilla will enable you to get a color reading from any pixel on the browser on the fly and paste it in any other program in RGB HEX formats. Just like ColorZilla also enables you to generate gradient colors and extract color palettes from any website. The extension also maintains a color history index of recently color picks.

4. Site Palette — Color Palette Generator

The next time you come across a website with a beautiful and pleasing color combination, this ingenious plugin can help you quickly extract and generate color pallets. It also allows you to download preview palette images, PDFs and generate shareable links. Site Palette is armed with seamless integration with coolers.co and Google Art Pallete. It has been an essential Chrome extension for developers & designers, throughout the globe.

5. Font Face Ninja — Font Identifier

Instead of inspecting elements in Chrome dev tools to find out the name of fonts being used, developers can instead rely on this elegant extension called Font Face Ninja to easily identify all the fonts being used on a webpage. Font Face Ninja boasts over 280k downloads and is the direct rival to another popular font face extension called WhatFont. To use this handmade Chrome extension for developers & designers, you simply have to hover over any text element on the webpage that you need to identify. A popup up floating window will display the name of the font face along with a small preview window for you to play around. You can bookmark your favorite font faces and save them for later use.

6. Marmoset- Code Snapshot Generator

Web designers and developers may encounter the need to create snapshots for their codes in their projects for aesthetics or representation purpose. Marmoset is a brilliant Chrome extension that allows you to create beautiful code snapshots in seconds with a single click. This might come in handy for social media posts or Portfolio website designs. It is one of the must-have Chrome extension for web developers & designers.

7. Page Ruler — Dimension and Size Checker

Page Ruler is one of the most essential and helpful Chrome extension for developers and designers on the list that helps web developers to quickly measure pixel perfect dimensions and positioning of any element on the page. This extension draws out a ruler image on the screen which allows you to inspect individual elements and view their dimension readings — width height along with positioning.

8. Dimensions- Dimension and Size Checker

Another key extension under this category is called Dimensions which helps to measure distances between various elements on a webpage. Its functioning is slightly different from Page Ruler. Dimensions measures distances from mouse pointer up/down and left/right until it reaches a border. This makes it the perfect tool to measure distances between images, input-fields, buttons, videos, gifs, text, icons. Another feature that sets Dimensions apart is its ability to work with mockups as well. If your designer has handed you Page design mockups in Jpeg or PNG formats, drop them inside Chrome and dimensions will work without a hitch. One thing that needs to be noted about dimensions is that it might not always work consistently well with images

9. Check My Links — Broken Link Checker

Check My Links is arguably the most powerful and robust broken link checker Chrome extensions for developers and designers in Chrome library. Check My Links crawls through the entire webpage and validates each individual link and reports whether it is valid or not. Check My Links empowers you to copy every broken link to your clipboard, in only a single click. Identifying and correcting Broken links is critical for any website for effective On-Page SEO and avoiding penalties from Google Site crawlers.

10. Clear Cache

Clear Cache extension helps to wipe clean your Cache along with browsing data with a single click without wasting time with any popups, dialogue windows or Chrome setting window. Furthermore, you can even customize how much data you want to clear on the extension option settings — App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords, and WebSQL. You can either delete cookies globally or for specific domains. One of the handiest Chrome extension for developers, designers, and everyone else too.

11. Wappalyzer — Site Analyser(Technology Identifier)

One of the biggest hurdles that developers face when coming across an impressive website face is the intriguing question — Which technologies have been used to make this website? This is where Wappalyzer comes to the rescue. This amazing extension is a cross-platform tool created by Elbert Alias in 2009 that uncovers the names of technologies used to create a particular website. It automatically detects over 1000 technologies like site generators, frameworks, libraries, plugins, CMS, databases, server software, widgets, analytics tools, etc. You can either use the Wappalyzer website or use the extension for quick usage. This Chrome extension for developers and designers has been a true lifeline for making appealing websites.

13. Ghostery — Privacy Tool

Ghostery is a privacy extension with built-in ad blocker to eliminate annoying advertisements from a website, tracking protection to protect your data and block 3rd party website from tracking along with page speed booster and optimizer to make your browsing experience uncluttered and pleasant. It also ships with a custom insights dashboard which you can customize to view relevant information.

13.JSON Viewer — JSON Beautifier And Viewer

If you are working extensively with APIs especially RestFul APIs or anything which involves a ton of JSON data, this visually stunning JSON highlighter serves great purpose as a Chrome extension for developers. Instead of viewing huge JSON file data in a clumsy unreadable format in your browser, JSON viewer helps to arrange JSON data in a visually appealing tree format which can view directly in your browser window.

14. Window Resizer — Screen Size Mockup

This extension is a lifesaver for responsive design coding. Although most developers are satisfied with default Chrome dev tools resizer feature, this Chrome extension for developers & designers can simulate any screen size and resolution of all popular devices like iPhones, iPad mac etc. This is quite helpful for developers to test out their layouts on different screen size devices and validate if their responsive media queries coding is working as intended or not.

Keep in mind though, Window Resizer would only be resizing the viewport to provide you with a near about idea of how your website will render on different screen sizes. For a more accurate and thorough responsive testing, you would need real mobile browsers to validate your website rendering.

15. Corporate Ipsum- Lorem Ipsum Generator

Another one of the most useful Chrome extensions for developers and designers. Instead of using the plain old standard lorem ipsum generators for creating placeholder text in your web layouts, why not try out using this smart tool that generates smart text rather than gibberish content. Corporate Ipsum extension is a special kind of lorem ipsum generator which creates mock business content text. This would make your layouts more visually appealing and presentable to clients.

16. Sessions Buddy- Tab/Session Manager

It also offers a bookmark manager with a simple and beautiful interface. It helps you to save sessions and restore them later when you open them on the fly. Therefore, avoiding clutter and keeping memory free. It allows you to manage all tabs in one page, organize them by topic and also offers quick search to look for a specific tab. Also, you need not worry about losing your session if you accidentally close your browser window or your system suffers a crash. Sessions Buddy will restore all your tabs as you left them.

17. CSS Viewer — CSS Property Viewer

Instead of wasting time looking for CSS properties of an element in the inspector window or the source code, CSS Viewer extension extracts all the valuable CSS properties and shows them in an organized manner inside a floating window. Simply hover over any element on the web page you want to inspect and the CSS viewer floating window will list out all the key CSS properties under categories — 1. Font and Text (font-family, font-size, font-weight, line-height, text-decoration, text-align), 2. Color and Background (color, background-color, background-position), 3. Box Model Properties (height, width, padding, margin), 4. Positioning, 5. Effects (transforms and transitions) and finally 6. Miscellaneous properties.

18. EditThisCookie- Cookie Manager

EditThisCookie is the most popular cookie manager extension in the Chrome Library with over 2.7million users which makes it the undisputed king when it comes to cookies. This tool allows you to add, delete, search, edit, block, and protect(Read-Only)cookies. Additionally, you can also import cookies in JSON or cookies.txt formats as well. This Chrome extension has been one of the most useful Chrome extension for developers & designers.

19. Checkbot- Site Auditor (SEO/Page Speed/Security)

Checkbot is an award-winning site-auditor extension that allows you to check over 250 URLs per site simultaneously to check SEO/Web Speed/Security issues like broken links, redirects, invalid HTML/CSS/JS, insecure password form, minify files, duplicate content etc. Checkbot runs tests based on 50+ best SEO and security practices based on recommendations from Google, Mozilla, and W3C. Using the Checkbot extension will help you craft perfectly optimized and secure websites which would slay Google SERP rankings. SERP ranking is crucial to every business on the internet, as a developer, you aim to provide a beautiful website but what good would that be if it wouldn’t have proper attention that it deserves?

I like to frequently run audits on my websites using Checkbot & find it a very convenient Chrome extension for developers and designers, around the globe.

20. Web Developer — Web Development Tools Package

An indispensable Chrome extension for developers and designers, this extension adds a toolbar with a complete suite of web development in your browser. The tools offered by this extension are divided into 10 separate tabs — Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize and Tools.

These tools include disabling javascript/plugins/popups/notifications, cookie manager, CSS property viewer and editor, form and image manipulation, window resizer, cache management, page ruler, property inspector, etc.

Conclusion

Dozens of new exciting extensions are released every week by Chrome developers crafted especially for web developers. These Chrome extensions for developers and designers vary from basic utility and design tools to development tools specific for various languages and frameworks which can save you tons of time and take your productivity to a whole new level. Keep exploring new Chrome extensions and please share your views below in comments if I have missed anything. I look forward to hearing your favourite Chrome extensions. Cheers!

13 Best JavaScript Framework For 2020

nikhiltyagi04 — Thu, 25 Jun 2020 09:33:53 +0000

According to stackoverflow’s developer survey 2020, JavaScript is the most commonly used language for the 8th year straight with 67.7% people opting for it. The major reason for its popularity is the fact that JavaScript is versatile and can be used for both frontend and backend development as well as for testing websites or web applications as well.

While googling ‘JavaScript framework’, you’ll come across various JavaScript frameworks, each with their own advantages and usage. With so many choices for the JavaScript frameworks for frontend, backend development, or even testing it’s difficult to choose the right framework for your requirements.

It can be really hard to find the perfect framework for your requirements. In this article on the best JavaScript framework for 2020, with the help of StateOfJS 2019, Stackoverflow’s Developer Survey 2020 and NPM trends, I’ve come up with a list of best JavaScript frameworks for frontend, backend, and for testing which might help you on this.

Front End JavaScript framework

JavaScript has been widely used for front end development for almost 2 decades. Popular frameworks such as React, Vue and Angular have gained a massive legion of followers while few new competitors have been gaining ground recently to challenge the big 3. Here are the 6 best front end frameworks of 2020 –

1. React.js

The first place in our best JavaScript framework for 2020 rankings in the front-end category belongs to React.js. React.js is an open-source front end JavaScript library (not a full-fledged framework) that was created by a team of Facebook developers led by Jordan Walke back in 2011 and became open source in June 2013. The initial prototype was dubbed “FaxJS” and was first experimented in Facebook’s Newsfeed. React can be considered one of the biggest influential disruptors in the web development domain that delivered a real breakthrough shaping web applications that we see today.

React introduced a component-based, functional, and declarative programming style for creating interactive user interfaces for mainly single-page web applications. React delivers blazing-fast rendering by making use of ‘Virtual DOM’ that renders only those components that have changed instead of rendering the whole page. Another key feature of React is the use of simpler JSX syntax instead of JavaScript.

Although React presents a slightly steeper learning curve than other best front end JavaScript frameworks in this list however React is supported by a huge developer community, bountiful learning resources, and a massive industry adoption in every corner of the world.

React has consistently topped popularity charts across the board for front end JavaScript framework, be it Stack overflow Developer Survey or the State OF JS Survey. React has consistently won the crown as the favorite front end JavaScript framework. World’s biggest companies and brands like Airbnb, Facebook, Instagram, Netflix, Twitter, WhatsApp, and many others have been built using React. It wouldn’t be wrong to assume that React.js is arguably the best JavaScript frameworks around.

React Usage Statistics 2020

React was chosen as the #1 front end JavaScript framework in State Of JS 2019 survey of JavaScript developers around the world for the 4th consecutive year! React has polled at 1st place since 2016 ahead of mainstream rivals Vue and Angular as the best JavaScript framework.
71.7% of JavaScript devs are currently using React whereas an additional 12% have shown a keen interest to learn it in future as per State Of JS 2019 survey. This marks an impressive jump of almost 8% from previous year where the active user figure stood at 64%.
In Stack Overflow’s developer survey 2020, React was ranked the 2nd most popular web framework with 35.9% votes behind jQuery which has been steadily losing share to react.
Approx. 1.45million to 1.6 million websites (live and historical) have been built with React acc. to Wappalyzer and BuiltWith statistics as of June 2020.
Current version – 16.13.1.
Github – 150k Stars and 1,388 Contributors as of June 2020
NPM – Averaging close to all time high of 7.5-8.5 million weekly downloads as of June 2020.

Pros of using React

Reusable components – React’s component-based approach helps developers to import or reuse UI components without breaking a sweat insteading of coding them from scratch.
Easy integration – React allows easy integration with other front-end and back-end framework like the popular PHP framework Laravel to work in tandem without a hitch.
One Direction Data flow – One greatest fundamental difference between React and angular 1 was that React was based on a downward One directional data flow architecture rather than a 2-way data binding adopted by Angular. This ensured that a child element cannot affect the parent making the code more stable and less prone to errors.
Simpler syntax – React uses JSX JavaScript extension instead of usual JavaScript which is a HTML like syntax that makes the code easier to read, understand and maintain.
Virtual DOM – React creates a virtual representation or a copy of DOM called Virtual DOM or vDOM. React compares the virtual DOM to the real DOM to only render components that have changed instead of rendering the whole page. This is the key behind React’s blazing fast performance.
SEO – After many improvements, React is one of the most SEO friendly front end frameworks that facilitates page crawling. Traditional JavaScript frameworks that rendered content dynamically were notorious for their poor SEO performance and incompatibility with search engine crawlers.
Continuous Improvement – React is in a state of constant evolution and improvement adding key new features like Hooks, Fiber, Concurrent Mode, Suspense etc for reducing boilerplate code, improving concurrency and fast rendering and boosting performance making it a strong contender as the best front end JavaScript framework.
Rich Community Support – React is backed by a massive Developer Community with almost 1.6k contributors on Github and a wide array of learning resources, tutorials and help guides readily available to anyone starting out. Also do not forget React is backed by one of the largest and most powerful company in the world – Facebook.

Cons of using React

Although JSX is a simpler syntax that is easier to read and comprehend, it might present an additional learning barrier to new developers.
Many developers might feel that React has a much steeper curve and bloated complexity when compared to key rival framework Vue,js or any other frontend JavaScript framework.
React is often plagued with complaints about poor documentation that cannot catch up with new releases and features forcing developers .
React only deals with the View Layer of the MVC Model leaving out no other option but to rely on other technologies to deal with Model and Controller Layers.
React is evolving and changing at a very fast pace requiring developers to play catch up and reskill themselves which can be exhausting and difficult to cope up with. Developers often find themselves stuck in a constant learning cycle which keeps rendering their previous knowledge useless or defunct.

Prominent websites built with React

Airbnb, Asana, BBC, Cloudflare, Codecademy, Dropbox, Facebook, Github, Imgur, Instagram, Medium, Netflix, OkCupid, Paypal, Periscope, Pinterest, Product Hunt, Reddit, Salesforce, Scribd, Shopify, Slack, Snapchat, Squarespace, Tesla, The New York times, Typeform, Twitter, Uber, Udemy, WhatsApp, Zendesk.

2. Vue.js

The 2nd place in our best JavaScript framework of 2020 rankings in the front-end category goes to Vue.js. Vue.js is an open-source lightweight front end JavaScript framework used to build creative user interfaces and high-performance single page web applications with minimum effort.

Vue was first launched in 2014 by Evan You, a developer working for Google who took inspiration from Angular to deliver a simple lightweight and efficient alternative in the form of Vue.js. Although Vue has adopted most of its features from React and Angular, it has made major improvements on those features to deliver a better, easy to use, and secure framework. The biggest example of this approach is that Vue offers a 2-way data binding as seen in Angular and ‘Virtual DOM’ as seen in React.

Likewise Vue offers high flexibility – not only can it function as an end-to-end full-fledged framework like Angular but also a view layer with state management like React. Thus, the principle key advantage of Vue is its simpler, uncomplicated, unrestrictive and progressive nature that adapts to developer’s needs. Vue has witnessed a massive explosion in its popularity over the last 2 years, dethroning Angular as the main rival to challenge the dominance of React as the best front end JavaScript framework. One of the world’s largest companies like Adobe, Apple, BMW, Louis Vuitton, Nintendo are using Vue.

Vue Usage Statistics 2020

Vue was placed at #2 in Front End JavaScript Framework rankings in State Of JS 2019 survey by developers for the 2nd consecutive year beating Angular. Vue was ranked at 3rd in 2017 and 5th in 2016.
40.5% of JavaScript devs are currently using Vue and pledge to keep using it while 34.5% have shown keen interest to use it in future (2nd highest % after Svelte) as per State Of JS 2019 survey. This marks an impressive jump of almost 12% in current users from previous year where the figure stood at 28.8%.
In Stack Overflow’s developer survey 2020, Vue was ranked 7th most popular web framework overall and 3rd most popular front end JavaScript framework behind React and Angular.
Approx. 427k to 693k websites (live and historical) are built with Vue acc. To Wappalyzer and BuiltWith statistics as of June 2020.
Current version – 2.6.11
Github – 166k Stars and 293 Contributors as of June 2020.
NPM – Vue registered an impressive 1.63 million weekly downloads on NPM as of June 2020 edging ahead of Angular.

Pros of using Vue

Simplicity – The strongest ace that Vue.js has in its corner is its stupendous simplicity. Any React or Angular Developer can pick up Vue in a heartbeat without breaking a sweat. Structure of Vue is simple and enables you to code more with type less syntax. Vue uses a single file component system which means that for any given component, HTML, CSS and JavaScript all reside in a single file.
Built in MVC – Vue has an inbuilt MVC that enables quick and easy configuration unlike React.
Easy to learn – Vue does not require you to learn JSX or Typescript like in case of React or Angular. Vue makes use of easy to grasp HTML templates that does not increase the complexity of code.
Small size – Another key advantage of Vue is its surprising lightweight size given its impressive prowess. gzipped version of Vue is barely 18-20kb in size, much lighter than its bloated bulky rivals like React or Angular.
Documentation – Vue is blessed with arguably the best documentation among all other framework on this list. Any beginner with basic knowledge of JavaScript should be up and running with Vue in a couple of hours thanks to well written and thorough documentation.
Integration – Vue can not only be used to create applications from scratch at a blazing fast face, it can also be integrated into existing web apps seamlessly without any trouble for creating new components.

Cons of using Vue

Small community of contributors – Vue.js does not enjoy the backing of a giant like Facebook or Google like in case of React or Angular. But Vue has indeed managed to create a community of backers. On github, Vue has 291 Contributors which is decent but still nowhere close to the kind of backing React enjoys with 1.6k contributors. Still kudos to Evan and his team for successfully creating one of the most powerful and loved framework the dev community has ever seen.
Limited employment Opportunities as compared to React and Angular – Vue is undoubtedly extremely popular in China and the US but that might not be the case in the rest of the world. Traditionally the US is always the leader in new technology adoption with the rest of the world lagging behind. Popularity of Vue has not yet cached up in the rest of the world like the US. This can be verified by the fact that out of 720k currently live websites built with Vue.js, more than 450k are registered in the US alone.

Prominent websites built with Vue

9gag, Adobe, Apple Swift UI, Behance, Bilibili, BMW, Chess, Font Awesome, Gitlab, Hack the box, Laravel, Laracasts, Louis Vuitton, Namecheap, Netlify, Netguru, Nintendo, Pluralsight, Pornhub, Shien, Stack overflow, Trivago, Trustpilot, Upwork, Wizzair, Zoom.

3. Angular.js

The 3rd place in our list of best JavaScript framework of 2020 in the front-end category goes to Angular.js. Angular is an open-source typescript based framework by Google used to build client-side single-page web applications. Angular was created by Google’s engineers Misko Hevery and Adam Abrons in 2010 named AngularJS (or Angular 1). AngularJS achieved widespread acclaim and was poised to reign supreme but the emergence of React pushed it into oblivion exposing its grave shortcomings. As a result, AngularJS went through a complete and total rewrite from the ground up and Angular 2 (or just Angular) was released in its place in 2016.

AngularJS(Angular 1) took inspiration from React and made drastic changes, the biggest of which was the shift from M-V-W architecture (Model-View-Whatever) to component-based architecture like React. Today Angular is one of the most secure front end JavaScript frameworks for building enterprise-scale applications out of the box. More than a million websites are using Angular including Google, Forbes, IBM, Microsoft among others.

Angular Usage Statistics 2020

Angular was ranked as the #3 front end JavaScript framework in State Of JS 2019 survey for the 2nd consecutive year. Angular slipped to number 3 spot in 2018 overtaken by Vue.js, a trend that is likely to continue this year as well.
21.9% of JavaScript devs polled are currently using Angular and 9.7% have shown interest to learn and use it in future as per State Of JS 2019 survey. These statistics indicate that Angular is losing the battle against React and Vue for the crown recording a 2% drop in active users when compared to the 2018 survey. Moreover Angular has polled the lowest, a meagre 9.7% in ‘interested to use in future’ category, well behind React, Vue and Svelte.
In Stack Overflow’s developer survey 2020, Angular was ranked 7th most popular web framework overall and 2nd most popular front end JavaScript framework just behind React.
Approx. 1.1million(currently live) – 3.6million(live and historical) websites are built with Angular as reported by Wappalyzer and BuiltWith statistics as of June 2020. This figure is the highest for any front end JavaScript framework.
Current version – 9.1.0
Github – 59.5k Stars and 1.578k Contributors as of June 2020
NPM – Angular registered a massive 1.62 million weekly downloads on NPM as of June 2020, almost the same as Vue but still well behind React.

Pros of using Angular

Component Based Architecture – After ditching MVW(model-view-whatever) architecture, Angular 2 and beyond adopted a strictly component-based architecture that facilitates reusability. Components can be used over and over again throughout the app. It also enhances code readability and ease of maintenance.
Server performance – Angular supports out of the box caching and tons of features to ensure fast server performance.
MVC – Model View Controller in angular establishes key features like scopes and data binding. It also ensures UI and App logic are isolated from each other.
2-way data binding – One key feature of Angular is 2-way data binding which forms a link between the Model layer and View layer in such a way that each one of them reflects a change in another. However, other rival frameworks have adopted a one-way data-binding for simplicity.
deal for building Enterprise scale web applications.
Third-party integrations – Angular offers a rich collection of third party integrations to further enhance their web application.
Massive Community Support – Angular is blessed with backing from Google and a huge developer community amassing over 1.1k contributors on GitHub. Angular also has great documentation coupled with a huge library of resources and community support.

Cons of using Angular

Typescript – In order to use Angular you are obliged to use Typescript which does offer a lot of advantages but still poses a big learning challenge to new developers to surmount. Typescript is a big barrier to entry and explains why angular has struggled against both React and Vue.
Heavy and Bloated – compared to lightweight alternatives like React JS and Vue JS, angular is extremely bulky and large in size, roughly close to 550-600kb which might not be suited for most of the small-scale applications.
Poor SEO – Angular struggles with SEO due to acute accessibility issues cornered with search engine crawlers/spiders. If SEO is your prime focus, React is a much better SEO friendly alternative.
Difficult migration – Even though AngularJS(angular 1) is now obsolete, many applications are still running this legacy version. Migrating from Angular 1 to Angular(current version 9) is extremely painful and cumbersome. Angular is developing at such a rapid pace, migration among new Angular versions can also be challenging sometimes.
Steep Learning Curve – Compared to React and especially Vue, Angular has a very steep learning curve which might present a daunting scenario for newbie developers. Angular requires a thorough knowledge of MVC to master.

Prominent websites built with Angular

Google, Allegro, Blender, Clickup, Clockify, Delta, Deutsche Bank, DoubleClick, Freelancer, Forbes, Guardian, IBM, Instapage, iStock, JetBlue, Lego, Mailerlite, Microsoft Office, Mixer, Udacity, Upwork, Vevo, Walmart, Weather, WikiWand, Xbox, Youtube.

Overcoming Cross Browser Compatibility Hurdles With Angular

4. Ember.js

The 4th place in our list of best JavaScript framework of 2020 in the front-end category goes to Ember.js. Ember.js is an opinionated open-source JavaScript framework used to create scalable enterprise-scale single page web applications. Unlike other frameworks that we have discussed until now, ember is based on the Model-View-ViewModel (MVVW) architecture pattern.

Ember was originally a SproutCore 2.0 framework that was renamed as Ember.js by its creator Yehuda Katz, an accomplished developer who is credited as one of the chief creators of jQuery. One of the most adored and key features of Ember is the Ember Command-line interface tool which is a productivity powerhouse in itself.

Even though Ember is one of the older front end JavaScript frameworks compared to React, Vue, and Svelte, it still packs a punch and has a big user base with major companies like – Microsoft, LinkedIn, Netflix, Twitch, etc among its clients. Ember’s older companions like backbone and polymer have faded away but Ember has somehow managed to hold its Fort thanks to a passionate community.

Ember Usage Statistics 2020

Ember is ranked at number 6 in the front end JavaScript framework category in the State Of JS 2019 survey. It has slipped one place compared to last year after being edged out by newcomer Svelte.
3.6% of JavaScript developers polled are currently using Ember and in the foreseeable future while 14.1% have heard about it and are planning to learn it somewhere down the road as per State Of JS 2019 survey. As I stated in my last years article, if you go by State of JS survey results, Ember is unfortunately slowly falling out of favour with developers who are flocking over to the big 3 – React Angular and Vue or over to new exciting framework like Svelte. In 2018 Ember polled at 6.2% in the active user category which has almost halved to mere 3.6% in 2019. However, if you go by Ember’s NPM weekly downloads, it has managed to carve out and preserve a loyal user base. Ember has consistently scored 450k-650k downloads over the past 2 years. Ember is also blessed to call Industry behemoths like Apple, Accenture, Digital Ocean, Fitbit, Godaddy, Heroku Intercom Twitch etc among its users which is enough to tell you that Ember is here to stay.
Approx. 32k – 36k(currently live) and 110k(live and historical) websites have been built with Ember as per BuiltWith statistics as of June 2020. Current version – 7.19.0
Github – 135Stars and 50 Contributors on Github as of June 2020
NPM – Ember-cli-babel package is hovering close to 550k weekly downloads on NPM as of June 2020.

Pros of using Ember

APIs – Ember provides a simple mechanism to work with APIs.
Convention over Configuration – Ember follows the philosophy of “CoC – Convention over Configuration” approach which ensures that there is no need for any configuration in most cases so that you can jump straight away to coding and building your web application.
Rich Documentation and support – Ember comes along with detailed documentation along with thorough tutorials and help guides to help you get started with ease.
Ember CLI – The Ember Command Line Tool is a productivity booster that not only helps to set up new projects but also creating components and controllers using automatic generation. Ember CLI also helps to install 3rd party dependencies.
Inspector Tool – Ember has an Inspector development tool extension for Chrome and Firefox that helps to monitor and edit applications in real-time.
Supports 2-way data binding similar to Angular.
Backward Compatibility with previous versions.

Cons of using Ember

Steep Learning Curve – Newbie Developers might find Ember quite challenging as compared to Vue or React.
Ember is more suited to complex large-scale applications and might prove to be too bulky and heavy for small scale simple applications.
Highly Opinionated – Ember is highly opinionated in a sense that any deviation from doing things by standard way might lead to frustrating problems.
Stagnation in popularity – Ember has suffered a stagnation over the last few years failing to attract new developers into its fold. Ember couldn’t find a spot in Stackoverflow’s Developer survey 2020 and could only register a meagre 3.6% in the active users category in State Of JS 2019 Survey. If this trend continues, Ember might get overtaken by Svelte.js by the end of 2020.

Prominent websites built with Ember

Crowdstrike, Ghost, GroupOn, Heroku, Intercom, LinkedIn, Microsoft, Netflix, Skylight, Square, TED, Twitch, Yahoo, Zendesk.

5. Preact.js

The 5th place in our list of best JavaScript framework of 2020 in the front-end category goes to Preact.js. Preact.js is a lightweight, swift, and high-performance library(not a full-fledged framework) alternative to React. Preact is merely 3kb in size (minified and gzipped) and yet gives you all the necessary functionality of React. Preact was created by Jason Miller, Senior Developer Programs Engineer at Google, and can be considered as a subset of React stripping away some functionalities.

Preact.js is built with the same core principle of React – Component based approach with Virtual Dom while being completely compatible with React. It can even use React packages without compromising on speed, performance, and leaner size. In instances where full potential of React isn’t necessary, most developers even use React during development and switch to Preact for production. Many major companies like Tencent, Uber, and Lyft are using Preact.

Preact Usage Statistics 2020

Preact secured #4 spot in front end JavaScript framework ranking in State Of JS 2019 survey for the 2nd consecutive year. Preact has extended its lead over Ember and Polymer.
9.5% of JavaScript devs polled have used Preact before and plan to stick with it while 25.6% have shown keen interest to learn and use it in future as per State Of JS 2019 survey. Although Preact has displayed a healthy growth in active users and popularity over the last couple of years, it’s possible for Svelte to surpass it by the end of 2020.
Approx. 21.5k(currently live) and 65k(live and historical) websites are built with Preact going by BuiltWith/Wappalyzer statistics as of June 2020.
Current version – 10.3.4
Github – 25.7k Stars, 1.4kForks, 228 Contributors as of June 2020.
NPM –Preact recorded 230k weekly downloads on NPM as of June 2020.

Pros of using Preact

Small Size – As mentioned earlier, the key merit of Preact.js is its small size of just 3kb, making it one of the most lightweight library/framework that you can find. Even with its lightweight size, Preact still delivers a faster render performance in comparison to its elder sibling React which has a size of 40-45kb (gzipped).
High Efficiency – Preact is more efficient than React in memory usage that means the garbage collector has to do less work.
Preact CLI – Preact offers an extremely powerful command-line interface tool that helps you create new projects seamlessly with ease while saving you the effort to deal with Babel or web pack.
Link State module – even though Preact is a subset of React, it has few of its own advanced features. The most important of them all is the LinkState module that optimizes state changes. React that uses arrow functions inside a render() method to update state. This method is inefficient with a lot of unnecessary code. Preact solves this problem by the use of LinkState module that returns a handle function when passed in an event updates component state changes automatically.
Compatibility – As discussed earlier, Preact uses the same ES6 API as React. This means the developers can easily switch to Preact from React in an existing project during production.

Cons of using Preact JS

Small Community and popularity – Preact has a tiny community as compared to React with only 200 contributors on github. Preact still isn’t very popular and merely 20k live websites have been built with Preact.js compared to half a million in case of React.
Preact does not support propTypes, a key feature in React.
Another big drawback with Preact is that it does not support createClass. It only supports stateless functional components and ES6 class-based component.

Prominent websites built with Preact

Bluehive, Bustle, Dailymotion, Dev.to, Dominos, Financial Times, GroupOn, Hashi Corp, Housing.com, Lyft, Pepsi, Rocket Chat, Smashing Magazine, Synacor, Sogou Wenen, Tencent, Treebo, Uber.

6. Svelte.js

The 6th place in our list of best JavaScript framework of 2020 in the front-end category goes to Svelte.js. Svelte.js is an open-source component-based front- end JavaScript framework written in Typescript. It was created by ex-Guardian front end developer Rich Harris. Svelte was first launched in 2016 and has ever since witnessed an absolute explosion in popularity.

Many developers consider Svelte to be a truly game-changing and revolutionary idea that fundamentally changes the way we code web applications and are tipping Svelte to dethrone React as the most popular front-end framework in the world.

Svelte unlike React or Vue has no virtual DOM. Instead, you build components boilerplate-free in simple HTML, CSS, and JavaScript code. Svelte Compiler then compiles this code into small framework-free vanilla JavaScript modules during build time and surgically updates the DOM when the state changes. So unlike other traditional frameworks like React or Vue, Svelte does not require high browser processing.

As a result, apps built with Svelte are lightning-fast with excellent performance. Other major advantages include zero client-side dependencies, absence of complex state management libraries, including Svelte can boast big names like Godaddy, Razorpay, 1password, New York Times as its clients.

Svelte sage Statistic 2020

Svelte has managed to break into the State of JS rankings for the first time ever as one of the best JavaScript framework, almost 3 years after its initial release. Svelte ranked as the 5th most popular front end JavaScript framework beating venerable competition like Ember and Polymer.
2019 proved to be an exciting year for Svelte witnessing a sudden explosive popularity and being embraced by mainstream developers with open arms as a front end JavaScript framework . Although Svelte managed to carve out a tiny 6.8% share of active users as per State of JS 2019 survey, it has garnered rave reviews and lauding from developers. Given the fact that 44.9% of developers have indicated interest to use Svelte in future, it is certain that Svelte will further gain a loyal legion of followers and mount a challenge to the Big 3 in 2020.
Approx. 3600 websites(live and historical) are built with Svelte acc. to Wappalyzer/BuiltWith statistics as of June 2020.
Current version – 3.20.1
Github – 32.8k Stars, 1.5k Forks, 283 Contributors as of June 2020
NPM –Preact recorded 52.5k weekly downloads on NPM as of June 2020.

Pros of using Svelte

Component based Model –Svelte.js follows the same component-based model as a framework like React or Vue. New improved reactivity features in Svelte version 3 has made the task of building reusable components even faster and simpler by writing less code.
Easy to learn – Svelte has a gentle learning curve and is arguably most suited for new developers. Reusable Components are built with simple HTML, CSS, and JavaScript code; no additional knowledge of typescript or JSX is required.
Small Size – Svelte has one of the smallest bundle sizes among all other libraries/framework as it has no bulky JavaScript framework runtime overhead and is simply a compiler.
Excellent Performance – As stated earlier, Svelte does not have a virtual DOM like React, instead relies on reactive programming to surgically update the DOM. As a result, Svelte is able to achieve the fastest rendering compared to almost any other framework and tops most of the performance benchmarks.
SEO – Unlike some other framework that struggles with search engine crawlers, Svelte is SEO friendly.
Supports client-side as well as server-side rendering.

Cons of using Svelte

Limited user base – Even though Svelte has won critical acclaim and laurels in the developer community, it is yet to be adopted widely in the industry. Svelte.js does have a few big name clients under its belt but the number of websites running Svelte are barely 3-4 thousand and that too mostly in the United States of America.
Small community and resources.
Lack of tooling – One of the biggest complaints against Svelte has been its poor immature tooling for debugging applications.
Lack of third party components – Unlike other framework React that has a plethora of third party component libraries like – React Bootstrap, Material UI, Semantic UI, Ant design etc, Svelte is still sorely lacking in this domain.
Scalability issues – Some developers might feel that Svelte is difficult to scale as it doesn’t officially support Typescript.

Prominent websites built with Svelte

1Password, AB Lab, Absolute Web, Bekchy, BlueHive, Cashfree, Chess, Comigo, Entur, Farmbox, Fusion Charts, Godaddy, HealthTree, Rakuten, Razorpay, The New York times.

Back End JavaScript framework

One of the key reasons behind JavaScript’s wild success and its ascend to the throne of worl’s most popular programing language is it’s versatility. Not only can JavaScript be used for front-end client-side development but back-end server-side development as well thanks to Node.js. There are several server-side javascript frameworks available to chose from, Express.js being the most popular choice. However you must keep in mind important factors such as performance, scalability, flexibility and nature of your web application before making a choice. Here are the 4 top javascript frameworks of 2020 for backend –

1. Express.js

The 1st place in our list of best JavaScript framework of 2020 in the bank-end category goes to the venerable Express.js. Express.js is an open-source minimal and un-opinionated web framework for Node.js used for building APIs and web applications. It’s so popular that it is considered to be the de facto best JavaScript framework for back-end with Node.js, especially in MEAN or MERN stacks. With almost 48k stars, it’s the most popular Node framework on Github.

Express was originally built by TJ Holowaychuk in 2010 before being acquired by IBM(StrongLoop) in 2015. It is currently maintained by Node.js Foundation. The key advantage of using Express is rapid server-side coding. Complex tasks that would take hours to code using pure Node.js can be resolved in a few minutes thanks to Express. On top of that Express offers a robust routing mechanism for handling highly dynamic URLs as compared to the basic and rudimentary one offered by Node.js.

Express also makes debugging an effortless task by easily pin-pointing bugs. Another benefit of using Express is that it provides a templating engine to dynamically render HTML pages on the server-side rather than client-side which makes web application more efficient. Express unsurprisingly has the largest share among all back end JavaScript frameworks and is used by major corporations like – Accenture, IBM, and Paypal.

Express Usage Statistics 2020

Express is ranked as the best JavaScript framework for backend in the State Of JS 2019 survey by JavaScript developers around the world for the 3rd consecutive year since 2017.
71.6% of JavaScript devs polled have picked Express as their premier choice for best JavaScript framework for backend whereas 12% are inclined to use it in future. Another testament to Express’s popularity is the fact that only 4% of JavaScript developers have never heard of Express before.
In Stack Overflow’s developer survey 2020, Express was ranked 5th most popular web framework overall and 2nd best JavaScript framework for server-side behind ASP.NET
Approx. 1.2 million websites (live and historical) have been built with Express acc. to Wappalyzer and BuiltWith statistics as of June 2020.
Current version – 4.17.1
Github – 48.k Stars, 8k Forks, 1,639 Contributors as of June 2020
NPM – Express is racking up an impressive 11.5-13 million weekly downloads on NPM as per June 2020 stats.

Pros of using Express.js

Community support – Express is a really mature 10 year old framework with a massive community backing. Express boasts more than 1.6k contributors on Github.
Good Documentation – Express is blessed with well written and thorough documentation along with a huge trove of tutorials and resources.
Fast paced development – Simplifies and accelerates developing web applications using Node.js.
Middleware – Express is technically a series of middleware function calls. Middleware functions perform various tasks like executing code, making changes to request and response objects and ending request-response cycle. Express has 5 types of middleware – Application-level, Router level, Error-handling, Built-in and third party middlewares.
Routing – Offers a powerful routing mechanism to define routes based on URLs and HTTP methods.
Integration with databases – Express offers seamless connectivity with all major popular databases like MongoDB, MySQL and Redis.
Integration with Template engines – All popular template engines like Pug, HAML, EJS, work out of the box with Express.
Easy to learn – Express is undoubtedly the easiest backend framework for newbie developers thanks to simple syntax and structure. You only need knowledge of vanilla JavaScript and Node fundamentals as a prerequisite.

Cons of using Express.js

Ensuring security of the web application is entirely up to the developer and quality of the code. Express by itself doesn’t offer any security solution.
Even though this isn’t really a disadvantage in most cases especially for experienced developers, biggers might find Express difficult to master because of its un-opinionated nature. There isn’t a defined structured way of doing things to guide beginners. Although, experienced developers will consider un-opinionated nature a big merit that offers more flexibility and freedom.

Prominent Websites Built With Express

Accenture, Coursera, Exove, Fox, Godaddy, IBM, Myntra, Nike, Paypal, Pluralsight, Quizup, Ripjar, Sony Playstation, Twitter, Uber, Unsplash, Yandex.

2. Next.js

The 2nd place in our list of best JavaScript framework of 2020 in the bank-end category goes to Next.js.

Next.js is an end-to-end server-side rendering framework based on React. Next.js was created by Dutch company Vercel(previously known as ZEIT) in 2017. Although both Next and Gatsby are based on React, there is one key difference between the two. While Gatsby is a static site generator, Next is essentially SSR- Server-side renderer.

But remeber Next does offer static generators as well. Next is built with the principle of “Build once, runs everywhere” which means that not only can you make web applications with Next.js but also mobile apps, desktop apps as well as Progressive Web apps.

The major advantages of using Next.js are – automatic code-splitting, hot code reloading, automatic routing, and built-in handling of SEO to name a few. Next has the privilege of stating major tech companies like Github, Docker, and Netflix as its users.

Next.js Usage Statistics 2020

Next was the runner up ranked at #2 best JavaScript framework for backend in State Of JS 2019 survey for the second consecutive year behind Express.
24.7% of JavaScript devs polled are currently using Next. But what’s even more impressive is the fact that a whopping 43% of devs are interested to give Next a try, the highest interest % for any backend framework.
Approx. 34k(live) and 100k(live and historical) websites are using Next acc. to Wappalyzer and BuiltWith statistics as of June 2020.
Current version – 9.3.5
Github – 47k Stars, 7k Forks, 1k Contributors as of June 2020
NPM – Next has clocked close to 500-570k weekly downloads on NPM as per June 2020 stats.

Pros of using Next.js

Server Side Rendering –Next.js has SSR(server-side rendering) out of the box to deliver much faster performance as it doesn’t have to wait for the client’s browser to load JavaScript to show content. SSR also sometimes referred to as “static pre-rendering” starts to render HTML from the server even before JavaScript code has been downloaded in the client’s browser and executed. As a result initial render of the application is available even when code is still loading in the background.
SEO friendly – Traditional Client side rendered apps have a poor SEO performance. Search engine crawlers face difficulties in indexing such pages. However Next.js with its server side rendering capability delivers an excellent SEO performance. Next.js allows us to create dynamic meta tags in the head section to optimise SEO.
Automatic code splitting – this feature in Next.js allows us to break down our application code into a series of small bundles which are loaded separately as needed without the need to lead the entire JavaScript code. This helps to deliver blazing fast optimal performance.
Pre-fetching – this feature in Next.js allows the lightweight bundles of JavaScript code mentioned above to be lazy loaded behind the scene.
Hot-code Reloading – Next.js automatically reloads the page when a change is detected.
Deploy everywhere – With Next.js you can build both small scale static websites as well as enterprise scale applications. Moreover, you can not only build web applications but also mobile apps, desktop apps as well as progressive web applications too.

Cons of using Next.js

Gatsby might be a better option than Next.js for smaller blogs where static build delivers a much more favourable and better performance than relying on Next.js Server side rendering.
Performance benchmarks of Next.js is in most cases inferior to Gatsby and Nuxt.
Requires back end server side to provide data.
Next.js is built specifically to work with React only.

Prominent websites built with Next

Auth0, Binance, Coinbase, Docker, Github, Hulu, Invision, Magic Leap, Netflix, Sesame, Starbucks, Trulia, Tencent, Twitch, Uber.

3. Gatsby.js

The 3rd place in our list of Top JavaScript Frameworks of 2020 in the bank-end category goes to Gatsby.js. Gatsby.js was founded by Kyle Mathews and Sam Bhagwat, and launched around May 2015. Gatsby is a modern, flexible React and GraphQl based Static Site Generator used to build high performance and SEO friendly static websites. Gatsby lets users pull data from any data source imaginable – CMS like WordPress, Drupal, Netlify, Contentful etc or APIs, databases or simple markdown. Unlike Next.js which we discussed above, Gatsby does not perform server-side rendering. Instead it generates HTML content on the client side during build time. As a result Gatsby.js delivers blazing fast performance, impeccable security and good SEO performance. Another major advantage that Gatsby offers is plugins that add key functionalities and modifications to make your life easier. These range from enhancing UI/UX, using styled components, integration with key services like Email marketing tools or CMS, SEO, image optimisation, setting up google analytics, creating sitemaps, robot txt files, caching etc. Gatsby.js is used by major brands like Airbnb, Nike, edx.org, Figma to name a few.

Gatsby Usage Statistics 2020

Gatsby has secured the 3rd best JavaScript framework for backend in State Of JS 2019 survey for the first time ever beating major and prominent rivals like Koa, Nuxt, Meteor, Sails and Feather.
22% of JavaScript devs polled have used Gatsby and plan to continue using it, while anadditional 35% have shown keen intention to give it a shot in future.
Approx. 38k(live) and 85k(live and historical) websites have been built using Gatsby acc. to Wappalyzer and BuiltWith statistics as of June 2020.
Current version – 2.20.26
Github – 43.7k Stars, 7.8k Forks, 3.1k Contributors as of June 2020
NPM –Gatsby has recorded on an average 380k-400k weekly downloads on NPM as per June 2020 stats.

Pros of using Gatsby.js

Fast Performance – Websites built with Gatsby.js are usually 2-3 times faster than normal websites built with other tech stack. Gatsby automatically compiles the most appropriate webpack config and handles optimisation, prefetching, lazy loading and fast rendering by default to maximise your website’s performance.
SEO Friendly – Static content generated by Gatsby.js is easily readable by Search engine crawlers and offers no hindrance like other JavaScript frameworks.
Out-of-the-box PWA – Gatsby.js converts your website into a full fledged Progressive Web App that enhances user experience to the maximum.
Supports Multiple Data sources – Gatsby collects data not only by markdown but also various other remote data sources like WordPress, Drupal, Netlify, Contentful, Trello, Stripe etc.
High Security – Gatsby offers implicit security as it does not require any server, database or dependencies.
Plugins – Gatsby’s rich and extensive plugin architecture will offer you a plugin for every task that you can hope to accomplish – image optimization, setting up google analytics, creating sitemaps, robot txt files, caching etc.

Cons of using Gatsby.js

Not suitable for large scale websites – Gatsby.js is not an ideal solution for content-heavy enterprise scale websites like e-commerce stores or media extensive websites. Build time will drastically increase as the size of content grows. This will lead to a significant drop in website performance. Gatsby is a perfect solution for small or even medium scale applications but large enterprise scale websites.
Prerequisite knowledge – Although learning how to use Gatsby is fairly easy, a perquisite knowledge of React and a little GraphQl is necessary.
Hosting – Hosting with Gatsby is not straight forward like using a normal website on Site ground, GoDaddy or HostGator.

Prominent websites built with Gatsby

Airbnb, Braun, edx.org, Fabric, Figma, Flamingo, Freecodecamp, Ghost, Hopper, Impossible, Nike, Paypal, React, Segment, Sendgrid, Snapkit.

4. Nuxt.js

The 4th place in our list of Top JavaScript Frameworks of 2020 in the bank-end category goes to Nuxt.js. Nuxt.js is an open source progressive framework based on Vue ecosystem used to build performant web applications especially server-side rendered apps. It can be considered as an enhancer for Vue. But keep in mind Nuxt.js is not a substitute for Vue as it cannot function alone. And neither can it be considered a full-fledged backend framework like Express. Nuxt.js is a combination of official vue libraries and components – Vue, Vue Router, vuex, vue server renderer and vue meta while also packing the prowess of webpack babel and PostCSS too. With Nuxt you can create 3 different kinds of web apps – Pre-rendered Static pages app, Single-page web application (SPA) as well as Server-side rendered web applications(SSR) or universal Apps.

Nuxt Usage Statistics 2020

Nuxt was placed 4th best JavaScript framework for backend rankings in State Of JS 2019 survey, slipping one spot from previous year after getting beaten by Gatsby.
11.3% of JavaScript devs polled are currently using Nuxt, while 26.7% have heard about it and wish to try it in future. However, Nux remains obscure for most devs. Close to 36% of JavaScript devs have never heard about Koa.
Approx. 35.5k websites have been built using Nuxt acc. to Wappalyzer and BuiltWith statistics as of June 2020.
Current version – 2.12.2
Github – 26.6k Stars, 2.3k Forks, 233 Contributors as of June 2020.
NPM –Nuxt has recorded an average 200k weekly downloads on NPM as per June 2020 stats.

Pros of using Nuxt.js

Fast setup and development – Setting up a new project in Nuxt.js is just a matter of a few minutes thanks to the starter-template that can be created easily using the command line. Nuxt handles most of the initial setup and configuration by itself so that you can head straightaway to coding.
Create Universal App – One of the biggest advantages that Nuxt.js offers is the ability to create Universal Apps – JavaScript code that runs on both client and server side. While traditional Single-page applications are plagued with slow loading times and poor SEO performance, Universal Apps deliver huge loading speed boost as well as improving SEO by making content available faster for search engine bots to crawl.
Project Structure – Nuxt by default organises your code in a logical, scalable and easy to understand structure right out-of-box. The main directories set up by default are – assets, components, layouts, pages, plugins and store.
Code Splitting – Nuxt generates a static version of your app with the most performant webpack config. As a result, every statically generated page has its own JS file. This helps to split overall application JavaScript code into smaller files boosting speed and overall performance.
Nuxt Community – ‘Nuxt community’ is a GitHub collection of several APIs, libraries, starter kits and modules that you would need when starting out.

Cons of using Nuxt.js

You might face problems integrating custom libraries with Nuxt.
Debugging issues when using Nuxt can often be quite challenging and frustrating.
Size of community backing Nuxt is relatively small as compared to Next.js or Gatsby.js
Documentation is not very extensive and there isn’t an abundance of good resources.

Prominent websites built with Nuxt

Aircall, Amplitude, Backmarket, Bitpay, Bootstrap Vue, Fox News, Gitlab, Icons8, Instrument, MyScript, Nespresso, Note.com, Ozon.ru, Roland Garros, System76, Todoist, Upwork, Wappalyzer.

JavaScript Testing Framework

JavaScript is also widely used for testing website or web applications. With more and more organizations opting for automation testing, JavaScript testing frameworks are being increasingly used for unit testing, integration testing and End-to-End testing.

1. Jest

Jest ranks #1 as the best JavaScript framework for testing by the stateofjs survey. It is developed by Facebook and the major focus with this JavaScript testing framework is on simplicity. It is being widely used with Selenium for JavaScript automated testing. It provides good cross browser support for automated browser testing.

Jest Usage Statistics 2020

Jest has continued its unrivalled dominance ranking at no. 1 as best JavaScript framework for testing in the State of JS 2019 survey for the second consecutive year ahead of its major rival Mocha for JavaScript automated testing.
61.2% of JavaScript devs polled have picked Jest as their premier choice for JavaScript automated testing framework whereas 22.8% have indicated a curiosity to learn and use it in future. Jest has seen a massive popularity boost between 2016 and 2020 increasing its user base by almost 15 times.
Current version – 25.4.0
Github – 30.6k Stars, 4.3k Forks, 1k Contributors as of June 2020
NPM – Jest is clocking approx. 6.8-7 million weekly downloads on NPM as per June 2020 stats.

Prominent websites built with Jest

Airbnb, Bla Bla Car, Circle Cl, Facebook, Instagram, Intuit, One football, Revolut, Spotify, Stack, Swat.io, The New York Times, Travel Perk, Twitter.

2. Mocha

Mocha is a JavaScript testing framework which runs on node.js and is widely used for asynchronous testing. It is a feature rich JavaScript framework and tests in Mocha run serially and the reports are accurate and flexible. Mocha supports both BDD and TDD environments for JavaScript automated testing for Selenium test automation.

Mocha Usage Statistics 2020

Mocha was ranked 2nd among the best JavaScript framework in the State Of JS 2019 survey behind Jest. Mocha lost its crown to Jest in 2018, and that trend is expected to continue in 2020 and beyond.
42% of JavaScript devs have picked Mocha as their favourite JavaScript testing framework whereas 22% of devs have heard about it and would like to learn it in the foreseeable future.
Current version – 7.1.1
Github – 19.2k Stars, 2.6k Forks, 400 Contributors as of June 2020.
NPM – Mocha has recorded on an average 4.3-4.4 million weekly downloads on NPM as per June 2020 stats.

Prominent websites built with Mocha

Accenture, Algolia, Asana, Clay, Codefirst, Coursera, Netlify, Open Collective, Principal, Third Iron, Triple Byte, Typeform, UX Planet, Webflow, Wix, Yahoo.

Mocha JavaScript Tutorial With Examples For JavaScript Automated Testing

3. Jasmine

Jasmine is a behavior driven development testing framework. It is compatible with any framework or library you might want to work with and is certainly among the flexible JavaScript testing framework.

Jasmine Usage Statistics 2020

Jasmine is ranked 3rd as the best JavaScript framework in the State Of JS 2019 survey for awareness.Although not quite popular as Jest or Mocha as a JavaScript testing framework, it is widely used for behaviour driven testing.
28.6 % of JavaScript devs have picked Jasmine as their favourite JavaScript testing framework whereas 16.7% of devs have heard about it and would like to learn it in the foreseeable future.
Current version – 3.5.0
Github – 14.8k Stars, 2.2k Forks, 194 Contributors as of June 2020.
NPM – Mocha has recorded on an average 1.6 million weekly downloads on NPM as per June 2020 stats.

Also Read: Best 8 JavaScript Testing Frameworks.

Wrapping It Up!

JavaScript will continue to be the dominant force powering the development of all kinds of web applications. But choosing the best JavaScript framework for your requirement out of dozens of options available is by no means an easy task. Every framework is packed with its own unique forte and shortcomings.

Carefully pay heed to your project’s requirements and understand which set of frameworks complement your needs and can deliver that best performance at the lowest development cost and time. The learning curve, complexity, compatibility documentation, community support should also be taken into account as deciding factors apart from just performance.

What did you think of our list of 13 best JavaScript framework of 2020? Leave your comments below to let us know if your favorite JavaScript framework made it to the list or if there is any other framework that you would like to be added here. I hope you liked this article on the best JavaScript framework, feel free to share it with your peers and colleagues by retweeting us or sharing this article on LinkedIn.😄

New Year Resolutions Of Every Website Tester In 2020

nikhiltyagi04 — Wed, 25 Mar 2020 11:31:29 +0000

Were you able to work upon your resolutions for 2019? I may sound comical here but my 2019 resolution being a web developer was to take a leap into web testing in my free time. Why? So I could understand the release cycles from a tester’s perspective. I wanted to wear their shoes and see the SDLC from their eyes. I also thought that it would help me groom myself better as an all-round IT professional.

I may have made a few bad decisions in 2019 but being a part-time web tester was not one of them. On the contrary, it worked like a charm. I was able to provide better development estimates after relating to loads associated with a tester’s bandwidth. I also made sure to follow best practices for avoiding cross browser compatibility issues and ended up saving a considerable lot of time for my testing team.

The trick about working on new year resolutions is that you need to start taking ‘incremental steps’ to bring the change as breaking the shackles is always difficult. Mind you, it is difficult but definitely not impossible!

Src: Buzzfeed

I don’t want to sound condescending, I love being a web developer, however, I am also becoming fond of web testing. Now, my job being a full-time web developer helps me to catch up with the recent trends of web development. This is why I decided that this year I will be venturing more as a part-time web tester to become a more productive resource for my team.

Now, what should I target as a website tester for 2020?

I thought this question would be best answered by my tech team at LambdaTest and so I went to every person on board and asked them about their targets and new year resolutions for 2020?

I came up with some intriguing pointers and interesting targets. This article, I will be sharing these new year resolutions for every website tester who is a part of the LambdaTest crew.

I Will Follow The Latest Trends In Web & Technology

It is important to follow the happenings in the outside world, especially about your line of work. There is not a single source of information on the internet that can provide you will all the information and you need to spend effort discovering those ‘gold mines’. Follow thought leaders in the field of web technologies, automation testing, etc. on social media platforms like LinkedIn, Twitter, etc. You can also join/subscribe to communities/groups like Google Groups, Reddit, Stack Overflow, etc. and consume information that is relevant to you.

Even if you are a newbie in website/web application testing, you should try answering questions on Stack Overflow even if you have partial information about a potential solution to the problem. Most importantly, make sure to follow these top 21 Selenium automation testing blogs of 2020.

I Will Venture Into Automation Testing

The field of website testing is constantly evolving and demand for automation testing of websites/web applications is picking up pace. There will be demand for manual testers as not all testing activities can be automated. However, the demand for automation testers will comfortably outpace the demand for manual testers. With emerging technologies like artificial intelligence (AI), machine learning (ML), etc. in automation testing, enterprises will be willing to invest more in automated testing than manual testing.

Manual Testing vs Automation Testing: Check Out The Differences

SDETs (Software Development Engineer in Test) or full-stack QAs are considered as advanced versions of software testers. They are in huge demand as they have knowledge about software development and testing. It’s never too late to start something! Getting started with automation testing will be the best thing you can do to kick-start your career in 2020.

I Will Learn Different Programming Languages

The Stack Overflow Developer Survey 2019 has an insightful list ofmost loved, dreaded, and wanted programming languages. The survey results could be a good starting point to know from a tester’s perspective about the programming languages that are in demand.

Each one of us in the automation testing field would be highly proficient with maximum 1-2 programming languages but you can never be complacent with the same. Learning new programming languages will keep you more prepared for rapid changes in the software testing industry.

It is a known fact that shifting gears from one programming language to another is not that difficult as the basic concepts of programming still remain the same. Automation tests for testing websites/web applications can be written using different programming languages like Java, JavaScript, C#, Ruby, Python, etc. Being proficient in different languages will help you outclass the rest of your team and set new standards for them in the long run.

I Will Blog About My Learnings

The fundamentals of the statement – There is something to learn from each one of us that still holds good. In 2020, make it a point that you document your experiments, learning, and experiences in a technical blog. Getting started with blogging and sticking to a schedule will be extremely difficult in the beginning but slowly it would become a part of your routine.

There is so much to learn from other’s experiences and starting a blog will not only help you improve your soft skills but also help you network & learn from other testers. Start a blog with a free blogging platform and slowly move to a custom domain once blogging becomes a part of your lifestyle.☺

Just like you might be searching for solutions to a technical snag that you are facing, there might be many others who would have written about a potential solution on their blog. Blogging on different topics related to website testing will help you in your professional journey as it has innumerable and intangible returns!

I Will Automate Browser Testing

Testing of websites/web applications on different combinations of browsers, devices, and operating system is very important for ensuring a consistent behavior and experience to your website visitors. Cross browser testing is and will always remain relevant as far as websites/web applications are concerned. However, have you ever thought about how much time you devote to manual cross browser testing? For a simple regression testing round, you may have to test your web application on hundreds of browsers + OS combination. It sounds exhausting, isn’t it?

This is precisely why you should be focusing on developing a skill around automated browser testing. will open doors to new avenues of testing.

Selenium is the most popular test automation framework for web-applications and Appium is the most popular test automation framework for mobile browsers.Selenium 4 which is the upcoming release of Selenium has many enhancements and excitement around its release should get you also excited about the test framework.

Getting started with Selenium is easy as it is compatible with popular programming languages. Start with automated browser testing on local Selenium Grid and eventually shift to UI testing using remote online Selenium Grid such as LambdaTest.

LambdaTest can help you perform cross browser testing on 2000+ real browsers & operating systems hosted on the cloud. You can perform manual and automated browser testing along with the benefits of third-party integrations. The best part is you can leverage parallel testing with Selenium and reduce your test cycles by multiple folds.

I Will Be Super-Attentive In Product Meetings

Are you a fan of Agile Scrums? Well, so are many enterprises handling complex development projects and deadlines. The daily scrums definitely help to bring more transparency among the team. However, one may counter that too many meetings can kill productivity and may end up being monotonous. Nevertheless, there is always some take away from meetings, particularly product meetings.

Product meetings can be fulfilling as you get to know from the product owners about the nuances of the product features and what thoughts went about designing & building the product. You can build a product management mindset from such meetings and that mindset can help you come up with better scenarios that will eventually be useful in improving the product.

Add the resolution of staying very attentive and taking notes when in Product Meetings.☺

I Will Learn Various Test Automation Frameworks

Selenium is one of the biggest names in automation testing frameworks. The advantage of the Selenium framework is that it open-source, compatible with popular programming languages like C#, Python, Ruby, Java, etc. and major browser vendors like Microsoft Edge, Google Chrome, Internet Explorer, Mozilla Firefox, Safari, etc.

Being globally accepted, Selenium has a wide user community which has led to the introduction of multiple language-specific test automation frameworks compatible with Selenium automation testing.

Python, the programming language that is gaining immense popularity has a range of test automation frameworks like PyUnit, pytest, Robot, Behave, etc. Similarly, there are frameworks for other languages too. For example:

So if you thought you are an expert in Selenium by working over a couple of frameworks, think again! There is still a lot to learn. Each framework has its own troubleshooting process, capabilities, and more. Getting started with these test frameworks might not be difficult as most of the test frameworks are compatible with Selenium WebDriver and prior knowledge of Selenium will always be an added advantage.

I Will Focus On Testing For Handheld Devices

The entire spectrum of web testing has changed with the penetration of mobile phones. Irrespective of the customer base, web-based businesses have to focus on mobile testing as mobile phones are becoming an intangible part of the business.

There are plenty of mobile test automation tools – Appium, Robotium, UI Automator, MonkeyTalk, Selendroid, etc. that will gain more prominence in the future. Appium is the most popular tool for automating native, mobile web, and hybrid applications on iOS, Android, and Windows desktop platforms.

Appium is widely used for automated browser testing on mobile devices. Cross browser testing with Appium can be further extended as it can be used with cloud based cross browser testing platforms like LambdaTest.

If you are an automation tester with knowledge of mobile test automation tools, you can do wonders in 2020 as mobile web testing is one of the leading software testing trends in 2020.

I Will Learn Nuances Of CI/CD

With continuous integration and continuous delivery, development teams are involved in frequent code changes that are pushed to the appropriate branch. Jenkins, JIRA, Travis CI, Gitlab, Bamboo, etc. are some of the popular tools used for CI/CD. Learning these tools will further enhance your skills and along with testing, you can also play a role in release management. This enables you to enhance your skill-sets as you can play the role of a tester as well as a release manager.

There are many MOOC courses on these topics. Start with a free-course to get acquainted with the subject and opt for a paid-course when required.

I Will Garner Skills in AI and ML

AI and ML are now being used in codeless test automation, including the latest Selenium IDE. With the rising demand of project methodologies like Agile, DevOps, CI/CD, etc., enterprises are looking for flexible QA approaches. The usage of Machine Learning (ML) for automation in testing will garner more attention in 2020 as it helps dynamically write test new cases based on user interactions by mining through their logs and behavior.

AI and ML algorithms are great at further optimizing the process of test automation and can be used in conjunction with Selenium framework to accelerate the automation testing process.

Having know-how about machine learning algorithms that can be used for automated browser testing will give you an upper edge in this hyper-competitive industry.

I Will Pay More Attention To The Performance

We don’t have to reiterate the importance of performance for a consumer-based website/web application. As web testers, you already know the implications that a slow page load or any other performance can have on the business.

Irrespective of whether you are working on the client-side testing or server-side testing, adding complementary skills will definitely help you scale up your profile. Learning server-side/back-end testing would require a considerable amount of effort. Hence, you should break that task into smaller sub-tasks.

Some of the popular server-side tools are Locust.io, Multi-Mechanize, Apache Bench, Httperf, JMeter, etc. Google PageSpeed Insights is one of the best tools available for gauging performance on the client-side. In fact, you can measure page load times with Selenium as well. If you are familiar with the Selenium framework, it could be a great starting point to venture into performance testing.

Learning these tools will improve your depth & understanding in automated testing as you can visualize the clear a wholesome picture from the client-side as well as the server-side.

I Will Build My Personal Brand

There are some things that will reap positive results after many years and one of them is your personal brand. Personal branding has become extremely important and the best manner to do the same is by letting relevant people know about your skills and spreading your knowledge.

Present in relevant conferences, upload your presentations online and start uploading your learnings/code to platforms like GitHub so that others can also benefit from your work. It also helps you improve your own skills.

I Will Improve My Soft-skills

When you are in a discussion, it is important to step into another person’s shoes and maneuver the language as per his/her skill-set and position. When you are presenting something to stakeholders in business (i.e. product managers, QA managers, VPs, etc.), it is important to make them aware of the business side of software/web testing.

Instead of big presentations that contain defect conversion charts; convert that information into a 1-2 page slider that walks them through the business risks and delivery timelines. This is not a simple task but it should be learned. Good communication skills (oral and written) are important traits for being a good tester as testers have to constantly communicate with relevant stakeholders in the team.

I Won’t Miss Out On Exploratory Testing

Sometimes, it is perfectly fine to venture into unknown territories and the same principle can also be applied to testing. As a tester, you keep performing your day to day duties of test planning, execution, and test case enhancements. Sometimes, you can also look at testing some features that were developed a long time back, have not been updated and are still being used by your users.

In 2020, make it a habit to take some time out from your busy schedule and perform exploratory testing of certain features in the product. This will help you improve the understanding of the product and vitalize your creativity and lateral thinking.

It’s Curtains

These are the New Year resolutions that were addressed by the tech team and I believe they would be valid for every website tester who wishes to thrive in the industry. The software testing field is going through a rapid transformation and you should have realistic deadlines to complete these goals☺.

“If you are not learning something new each day, you are not testing.”

-Jerry (Gerald) Weinberg

One thumb rule that has followed is making sure that there is some progress every single day so that you are in a comfortable position to achieve the New Year resolutions.

As website testers, what are your top resolutions for 2020? Do share your key resolutions by leaving a note about them in the comments section of the blog. Happy new year and happy testing! 🙂

CSS Preprocessors – Sass vs LESS vs Stylus (With Examples)

nikhiltyagi04 — Wed, 04 Mar 2020 14:01:33 +0000

It has been a while since the concept of CSS Preprocessor made its debut into the mainstay of front-end web development workflow and changed the way we code CSS. To say that its impact in pushing the limits of what CSS can achieve has been nothing short of revolutionary, would be a grave understatement. To all the front-end developers actively arguing around the debate for Sass vs LESS in their projects, I can only hope that your neck isn’t sore from nodding in agreement.

It would be unfathomable to go back to the days without Sass, stuck in the messy quagmire of vanilla CSS code which often proved difficult to manage and organize as you scale up. Yet quite a lot of beginners and even some experienced developers, are doing a great disservice to themselves by being reluctant to adopt CSS Preprocessors and continue to ignore them.

In this article, we will explore what CSS Preprocessors are, what are their advantages, their features, comparing the most popular types of CSS Preprocessors being used and finally how to set them up in your project.

What Is A CSS Preprocessor?

CSS in itself is devoid of complex logic and functionality which is required to write reusable and organized code. As a result, a developer is bound by limitations and would face extreme difficulty in code maintenance and scalability, especially when working on large projects involving extensive code and multiple CSS stylesheets. This is where CSS Preprocessors come to the rescue.

A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS. By using CSS Preprocessors, you can seamlessly automate menial tasks, build reusable code snippets, avoid code repetition and bloating and write nested code blocks that are well organized and easy to read.

However, browsers can only understand native vanilla CSS code and will be unable to interpret the CSS Preprocessor syntax. Therefore, the complex and advanced Preprocessor syntax needs to be first compiled into native CSS syntax which can then be interpreted by the browsers to avoid cross browser compatibility issues. While different Preprocessors have their own unique syntaxes, eventually all of them are compiled to the same native CSS code.

Moving forward in the article, we will take a look at the 3 most popular CSS Preprocessors currently being used by developers around the world i.e Sass , LESS , and Stylus.

Before you decide the winner between Sass vs LESS vs Stylus, let us get to know them in detail first.

Sass – Syntactically Awesome Style Sheets

Sass is the acronym for “ Syntactically Awesome Style Sheets ”. Sass is not only the most popular CSS Preprocessor in the world but also one of the oldest, launched in 2006 by Hampton Catlin and later developed by Natalie Weizenbaum.

Although Sass is written in Ruby language, a Precompiler LibSass allows Sass to be parsed in other languages and decouple it from Ruby. Sass has a massive active community and extensive learning resources available on the net for beginners. Thanks to its maturity, stability and powerful logical prowess, Sass has established itself to the forefront of CSS Preprocessor ahead of its rival peers.

Sass can be written in 2 syntaxes either using Sass or SCSS. What is the difference between the two? Let’s find out.

Syntax Declaration: Sass vs SCSS

SCSS stands for Sassy CSS. Unlike Sass, SCSS is not based on indentation.
.sass extension is used as original syntax for Sass, while SCSS offers a newer syntax with .scss extension.
Unlike Sass, SCSS has curly braces and semicolons, just like CSS.
Contrary to SCSS, Sass is difficult to read as it is quite deviant from CSS. Which is why SCSS it the more recommended Sass syntax as it is easier to read and closely resembles Native CSS while at the same time enjoying with power of Sass.

Consider the example below with Sass vs SCSS syntax along with Compiled CSS code.

Sass SYNTAX

$font-color: #fff
$bg-color: #00f

#box
  color: $font-color
  background: $bg-color

SCSS SYNTAX

$font-color: #fff;
$bg-color: #00f;

#box{
  color: $font-color;
  background: $bg-color;
}

COMPILED CSS

In both cases, be it Sass or SCSS, the compiled CSS code will be the same –

#box {
  color: #fff;
  background: #00f;
}

Usage of Sass

Arguably the most Popular front end framework Bootstrap is written in Sass. Up until version 3, Bootstrap was written in LESS but bootstrap 4 adopted Sass and boosted its popularity. A few of the big companies using Sass are – Zapier, Uber, Airbnb and Kickstarter.

LESS – Leaner Style Sheets

LESS is an acronym for “Leaner Stylesheets”. It was released in 2009 by Alexis Sellier, 3 years after the initial launch of Sass in 2006. While Sass is written in Ruby, LESS is written JavaScript. In fact, LESS is a JavaScript library that extends the functionality of native vanilla CSS with mixins, variables, nesting and rule set loop. Sass vs LESS has been a heated debate. It is no surprise that LESS is the strongest competitor to Sass and has the second-largest user base. However, When bootstrap dumped LESS in favor of Sass with the launch of Bootstrap 4, LESS has waned in popularity. One of the few disadvantages of LESS over Sass is that it does not support functions. Unlike Sass, LESS uses @ to declare variables which might cause confusion with @media and @keyframes. However, One key advantage of LESS over Sass and Stylus or any other preprocessors, is the ease of adding it in your project. You can do that either by using NPM or by incorporating Less.js file.

Syntax Declaration: LESS

Uses .less extension. Syntax of LESS is quite similar to SCSS with the exception that for declaring variables, instead of $ sign, LESS uses @.

@font-color: #fff;
@bg-color: #00f

#box{
  color: @font-color;
  background: @bg-color;
}

COMPILED CSS

#box {
    color: #fff;
    background: #00f;
  }

Usage Of LESS

The popular Bootstrap framework until the launch of version 4 was written in LESS. However, another popular framework called SEMANTIC UI is still written in LESS. Among the big companies using Sass are – Indiegogo, Patreon, and WeChat

Stylus

The stylus was launched in 2010 by former Node JS developer TJ Holowaychuk, nearly 4 years after the release of Sass and 1 year after the release of LESS. The stylus is written Node JS and fits perfectly with JS stack. The stylus was heavily influenced by the logical prowess of the Sass and simplicity of LESS. Even though Stylus is still popular with Node JS developers, it hasn’t managed to carve out a sizeable share for itself. One advantage of Stylus over Sass or LESS, is that it is armed with extremely powerful built-in functions and is capable of handling heavy computing.

Syntax Declaration: Stylus

Uses .styl extension. Stylus offers a great deal of flexibility in writing syntax, supports native CSS as well as allows omission of brackets colons and semicolons. Also, note that Stylus does not use @ or $ symbols for defining variables. Instead, Stylus uses the assignment operators to indicate a variable declaration.

Stylus


/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color = #fff;
bg-color = #00f;

#box {
    color: font-color;
    background: bg-color;
}

/* OR */

/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color = #fff;
bg-color = #00f;

#box 
    color: font-color;
    background: bg-color;

/* OR */

/* STYLUS SYNTAX WITHOUT COLONS AND SEMICOLONS */
font-color = #fff
bg-color = #00f

#box 
    color font-color
    background bg-color

COMPILED CSS

#box {
    color: #fff;
    background: #00f;
}

Usage of Stylus

Some noteworthy frameworks written in Stylus are Basis and Kouto Swiss. Among the big companies using Stylus are – Accenture, HackerEarth, Coursera.

Popularity of CSS Preprocessors

Even though Native CSS is advancing and moving ahead by leaps and bounds adding support for new features like custom property variables, CSS Preprocessors still enjoy widespread popularity and unwavering loyalty among developers. As per the popular – The Front End Tooling Survey by Ashley Nolan, a vast majority – 86.86% of developers are using some kind of CSS Preprocessor (Sass being the pack leader) whereas 13.14% of developers are still sticking to writing vanilla CSS without any CSS Preprocessor.

CSS PREPROCESSOR USAGE – FRONT END TOOLING SURVEY 2019

It’s barely a surprise that the war between Sass vs LESS vs Stylus or others is clearly dominated by Sass by bagging a majority of 77.27% share, almost 12% increase from the previous year. Although, LESS has progressed with a bigger percentage too i.e. 7.52% the overall percentage of users adopting is still pretty low, if we talk about Sass vs LESS. Stylus popularity in 2019 is a little sluggish with an increase of just 1.08% compared to 2018.

Another key survey called State Of CSS 2019 reflects a similar sentiment but offers a deeper insight into the popularity of different CSS Preprocessors. As far as user share among Preprocessors is concerned Sass as expected has the mammoth share of 80%, followed by LESS with 47% and finally Stylus with 14%. The survey also reflects that experienced developers are more likely to use some kind of CSS Preprocessor than beginners with low experience.

CSS PREPROCESSOR USAGE – STATE OF CSS 2019 SURVEY

One more interesting insight that the State Of CSS survey offers is – Awareness, interest, and satisfaction ratio rankings. Sass has managed to win the top spot again, leading in all the three categories with Awareness 100%, Interest 59% and Satisfaction at a high of 90%. Even though LESS enjoys the same level of awareness as Sass, interest ratio has taken a massive dip and satisfaction level just shy of 50%. The stylus has the least awareness ranking but has nearly the same scores when it comes to interest and satisfaction.

Sass vs LESS vs Stylus

Best Compiler Tools For CSS Preprocessors

As we discussed earlier, CSS Preprocessor like Sass LESS or Stylus syntax cannot be interpreted by browsers. It needs to be first compiled into CSS. This can be easily done using 3rd party compilers or Code editor extensions mentioned below.

Live Sass Compiler – A VSCode Extension

Live Sass is one of the most popular Visual Studio Code extensions created by Ritwick Dey which not only compiles/transpilers your Sass/ SCSS file into CSS in real-time but also enables the live browsers to reload to display changes automatically. This extension ensures that you never need to leave your code editor window and completely eliminates the need for any 3rd party compiler.

Prepros

Prepros is a free cross platform compiler available for Windows, Mac OS, and Linux. It can compile all the 3 major CSS Preprocessors that we have discussed – Sass, LESS and Stylus. Apart form compilation, Prepros has a simple and easy to use interface along with rich features. Prepros offers several exciting key features like CSS autoprefixer to boost File Minifier and Uglifier, Image optimization along with live reload. That is not all, it also offers better cross browser compatibility, which is a process of making sure that your website is rendered in a consistent manner across different browsers. With LambdaTest, you can perform cross browser testing on 2000+ real browsers running over real operating systems on-cloud.

What Is Cross Browser Compatibility And Why We Need It?

CodeKit

Codekit is a premium Development tool kit for Mac OS. Codekit is the most feature-rich compiler that comes packed with image optimizer, minified, Cache buster, built-in NPM and several CSS frameworks along with debugging tools.

Why Using CSS Preprocessors In Every Case Isn’t A Good Idea?

Although CSS Preprocessor like Sass, LESS, or Stylus have proved to be a handful in front-end development workflow and has a long list of merits to their names, there are particular instances where you might not encounter the need to use these preprocessors.

Don’t Use Them For The Sake Of Variables

If you’re planning to use Sass or some other CSS Preprocessor only for the sake of variables, then Native CSS can more than cater to your needs. CSS Custom Properties are user-defined variables created using ‘–’ notation and accessed using var() function. A custom property can be defined inside any element but the popular convention is to define custom property variable globally inside ‘:root’ selector.

:root {
  --font-color:  #777;
  --bg-color: #f00;
}

.content {
  color: var(--font-color)
  background-color: var(--bg-color); 
}

One advantage of using Native CSS Custom Property Variable over Sass or LESS variable is that they are updated dynamically instead of after being compiled.

Remember, Native CSS offers Calc() functionality

Native CSS also offers calc() functionality to perform calculations for property value. Coupled with CSS custom property variable it can prove to be quite useful –

:root { 
    --font-size: calc(16px + 0.2vw); 
} 
body { 
   font-size: var(--font-size); 
}

You Can’t Gain Absolute Control Over CSS with Preprocessors

If you wish to have absolute direct control over CSS instead of relying on compiled CSS, then Preprocessors might not be your cup of tea. If you are facing problems in understanding how and why a particular compiled CSS code has been generated from a Preprocessor, then stick to vanilla CSS until you have a deeper understanding of how that Preprocessor syntax works.

CSS Preprocessors Aren’t For Everready Code Deployment

If you wish to keep your code deployment ready at all times instead of constant compilation from CSS Preprocessor to Native CSS after each change. Although using 3rd party Preprocessor Compilers like ‘Prepross’ or code editor extensions like ‘Live Sass’ in VS Code can automatically compile your Sass or other Preprocessor code into vanilla CSS and update changes in a browser window using Live preview.

So, Sass vs LESS vs Stylus, What Is Your Pick?

The big 3 – Sass, LESS and Stylus, continue to dominate the CSS Preprocessor race with Sass/ SCSS enjoying the status of the undisputed leader in popularity. All three Preprocessors have almost similar features and functionalities. Every CSS preprocessor accomplishes a given task in their own characteristic unique way enabling developers to use extremely powerful tools to write clean code at a blistering pace. While Sass has the largest user base and active community, LESS is the easiest to compile and integrate. On the other hand, Stylus is still a popular choice for Node JS developers as it combines the extensive logical prowess of Sass with the simplicity of LESS. Some other CSS Preprocessors that you can explore are:

In the end, the choice of CSS Preprocessor would largely depend on the developer’s preference and project requirement. Did I miss out on your favorite CSS preprocessor? Let me know in the comments below. Till next time! 🙂

CSS Grid Layout vs CSS Frameworks: When To Use What?

nikhiltyagi04 — Tue, 03 Dec 2019 12:16:20 +0000

“CSS Grid or CSS Framework? What should I use for my next project?” It is a question often asked by web developers, specifically new ones after they are introduced to the CSS Grid layout. CSS Grid layouts allows developers to build custom complex layouts with absolute control only by using Native CSS properties without relying on any frameworks which are bound by basic 12 column grid layouts plagued with default styling rules and do not offer a lot of room for customization. On the other hand building grid layouts with frameworks like Bootstrap feels like a breeze without the need of writing any CSS style rules or media queries to make the layout responsive.

Initially, when CSS Grid layout was introduced, it lacked cross browser compatibility which made many web developers a bit hesitant towards its implementation but that is not the case now! Which brings us to a question where we evaluate whether the CSS grid layout has eliminated the need for CSS Frameworks like Bootstrap to create layouts?

Don’t worry! If you have faced such questions yourself then you are at the right post. This post is all about that. I am going to highlight the differences between CSS Grid vs CSS Framework. We will also ponder the cross browser compatibility between these two. By the end of this article, you will be able to make a judgment call about your next pick among CSS Grid or CSS Framework. Let’s hit the road with a basic definition of these two!

What Are CSS Frameworks?

A CSS framework are also interchangeably referred as CSS libraries The basic purpose is to bring a more standardized practice for web development. Using a CSS Framework or CSS library you can fast-track your web development effort as it allows you to use predefined web elements. Meaning, if you wish to add a UI element for your web-application then all you need to do is include the framework CSS and JS file in your project and specify the HTML class for the element you want to style. This is how a CSS framework works.

Almost every CSS Framework has a grid, few of them have more grids to offer, few CSS frameworks even offer advanced JavaScript functions around interactive UI patterns.

To make it clear, we can take an example of a Bootstrap framework which is, in my opinion, one of the most famous CSS frameworks.

Bootstrap is a front-end CSS framework, open-source and on GitHub, which helps in the UI development of the basic components of the CSS. You can change the style of your buttons, fonts and much more using Bootstrap.

Let us take an example, say you have to define a rounded button to your website, now instead of writing a fresh piece of code, you can leverage the CSS frameworks such as Bootstrap to provide you with an already defined code for the button you wish to have.

To display the above buttons in your website, all you need to do is copy the below HTML code and paste it in your web application project, of course, you will have to specify the button text as per your requirements but the rest is all taken care of!

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

CSS Frameworks provides a lot of flexibility for the developers in their projects and saves a lot of time. This way they can develop something more pleasing to the eyes with the help of frameworks without writing everything from scratch and not worrying about any cross browser issues or inconsistencies.

Similar to Bootstrap, there are many other CSS frameworks or CSS Libraries

Top 18 Free CSS3 Frameworks To Build Fast Lightweight Websites

Cross Browser Compatibility Of CSS Frameworks

Cross Browser compatibility is a headache for web developers to face every day. With such an overwhelming advancement in browser development, the need to develop a web page that delivers a uniform cross browser experience is increasing day by day.

Gone are those days when everyone was on Safari and Internet Explorer. Many other browsers have taken the internet by storm like Google Chrome, Mozilla Firefox, Opera, and they are loved more than the Internet Explorer if we refer to browser market share. Millions of people prefer different browser and every browser company focuses on being different. This is what helps it to be liked by the people. This has increased the headache that comes from cross browser compatibility.

CSS Frameworks lifts this burden for you. A framework is not coded for a single browser. If it is, how do you think it will get popular? It won’t. A framework developer already knows that it will be used by millions of people who will be sitting on which browser, nobody knows. Hence, the frameworks are neutral and resolve the cross browser compatibility issues. You can just focus on the designing and creative parts of the website while using the framework.

Keep in mind though, that irrespective of which CSS framework you use and no matter how much cross browser compatible it may be. It is always recommended to perform an End-to-End integration testing of your web application across different browsers. The process is termed as cross browser testing and you can perform it over 2000+ real browsers in real-time with LambdaTest, an online cross browser testing tool. You can even execute Selenium automation testing using our online Selenium Grid.

Benefits of Using CSS Frameworks

Code Maintenance: CSS Frameworks helps in easing out the code maintenance. Code maintenance is required once the code is developed and maybe the website has also been published. We often make changes to the code and add or modify functionalities of certain elements or complete the website. We need to maintain the code in such cases. Maintaining is a process of not affecting the parts of the website that are required to be constants. Since frameworks reduce the code and bring about fixed notations into the code, it is always easy to maintain the code.

Consistency and Uniformity: It is fairly obvious that when you have something predefined with some rules and functions of its own, you apply those things everywhere around the globe. The same thing happens when you use a framework in CSS. A framework has predefined functions to use its functionalities. If you want to use a particular feature of a framework, you will have to use the same functions no matter where you are sitting on the planet. This creates consistency in the code. A code is consistent and uniform throughout the project and the same project can be done by people sitting at different locations in the geographic. This consistency and uniformity help the developers understand the code and save a lot of time. This is one of the major reasons that the developers do not try to develop their own code or functionality but try to use the existing ones and modify them according to themselves. It is easier for everyone.

Quick Deliveries: This point is quite implicit, and you must have already guessed it in your mind. Using frameworks saves a lot of time in your project building and hence the delivery is really quick. The time is saved by the use of predefined functions and functionalities that you need. Let me give you a simple example to show you the same. You are a developer and you have been given a project to develop. A project where you have the functionality to write the text in a box (preferably with rounded corners) and the tooltip describing its meaning. Now, these things can be done within 5 minutes if you are using a CSS framework called Bootstrap. But you want to use your own code. So, you start developing. Leave aside the rounded corner buttons. You will definitely need to use a lot of your head and time while developing the tooltip functionality. This will unnecessarily increase your time to many folds. Also, remember that this is a complete project and not a single web page that you can get away with an excuse. Your project will contain many such functionalities which are just a one-line job if you use a framework. On the other side, your client will not have any effect and does not care what you use. Whether you use a framework, or you go for your own coding, a tooltip is a tooltip and that is what matters to the client. So, it is better to use a framework to save time and deliver quick.

Vast Communities: CSS Frameworks over CSS Grid, takes a huge advantage from its vast communities. These communities are set up because of the vast number of users of the framework and the fact that frameworks have been in the business for a long time now. As the number of users grows, the problems faced by the people also increase. These people reach out to other people on the internet who maybe have solved that problem already or have reached out to other people in the past and just know the solution. This chain goes on and on. This process has increased the number of users who are using a framework. It is quite obvious that if I give you a choice to choose between something of which huge support is available and something whose mediocre support is available; you will be inclined towards the huge support one. This support helps you break any hurdle you are facing and experiment with something of your own. You will have a huge number of people who are knowledgeable and ready to support.

Frameworks are not new: Frameworks are not new. They have existed since the time’s developers have come across this problem of repeating some complex things again and again. They developed frameworks that can be used by many people and any person around the globe. CSS Grid is not so old. It came across long after the frameworks when people started using grids way too much or should I say the need for grids arose way too much. The age of both of these concepts matter. Since frameworks started before grids, the number of projects that have used frameworks are more. Even for building grids. A good number of these projects have been finished but many projects continue long after they are delivered or published. This is because there is always a scope for modification or advancement. You might start adding new functionality to your websites or modify the older one to a beautiful look. If your project has been a hit, you will surely be stuck with it. These projects used frameworks and if a new person is working on it, he will get used to the frameworks. Maybe he uses the same in the next projects on which he will work on. This increases the usage of frameworks and everything gets connected. More the projects on frameworks, more people working on it, vaster the community, better the framework is.

Documentations: CSS Frameworks that have been already developed contain documentations that are helpful in learning how to use the framework effectively. This process is underrated but is very important as it takes a lot of time in developing the documentation. Consider you are not using the frameworks but are more interested in developing your own. One the framework is done; you need documentation too for teaching everybody how does the framework work. If you are going to upload your framework on the internet as an open-source or for the usage of other people then you need some platform to tell them how does that framework work. This is where documentation comes in handy which are often taken for granted when we are learning a new framework. As soon as we find a new framework, we will immediately navigate to the documentation to learn about it. This is a basic step but when it comes to our own documentation, we understand the importance of it. Moreover, these documentations need to be updated as your framework updates. Creating documentation might seem some pain in the beginning but is of a lot of help and makes your work easier in the long run. So, overall, having documentation actually glorifies the framework and its usage.

Drawbacks of CSS Frameworks

Makes you work in its way: Framework will restrict the way you code and the way you work. A framework as discussed is built for everyone and keeping in mind every developer out there. This restricts the way you should have worked or could have worked. Now, you need to work the way the framework wants you to work. This includes the designing part. You cannot design something that you were thinking in your mind. You need to use the framework classes which already have built that part. This can be a button, a simple layout or anything that you want. Arguably, yes you can change the thing by coding it on top of the framework but, what is the point of using the framework when you have to use so much on top of it. This gives rise to uniform websites that we will discuss as the next con.

Uniform Website: Using a framework restricts the way you needed to design the small elements of your design. Using the classes of the framework will give you the same structure more or less of every element. Since every big element is the combination of many small elements, the big elements become the same structure. This makes two websites using the same framework as a uniform. Not entirely but you can easily tell by looking at the structures. Uniform websites are always a bad thing for a website developer. Until and unless you have a website where the traffic you are getting is mandatory, like some college admission website or a government website, you need to have a different and appealing structure. The first impression on a user is always the way you have structured your website and how it is displayed. It is quite common that two websites on a particular topic like News or Digital Products will look similar if they have used the same framework.

Forces you to learn a new framework: In the above sections I mentioned that there are many frameworks available in the market today which work on CSS. I have listed a few at the starting of this post. Now it is obvious that every framework is different in its own way. Similar to the different browsers that we have in the market. Since there are so many frameworks, it is obvious that you must be having your own favorite framework and have been working on it for some time. This creates problems when your client wants you to work on a different framework. This means he wants his project to be developed using another framework of which you have no idea about. Now you have to learn an entirely new framework just for one project and maybe you will never use that framework again. This is a loss of time for a developer but there is no option.

When Should You Use CSS Frameworks?

If you are a beginner in front end web development and haven’t yet mastered CSS then using a CSS framework is the right fit for you. Frameworks like Bootstrap are super easy to master and can create complete web page layouts within seconds without the need of writing any CSS code. Offering unprecedented ease of use, lightning-fast deployment, close to 100% cross browser support, standardization of the codebase and easy learning curve makes CSS frameworks an attractive choice for you. If your aim to build standard cross browser compatible layouts at a lightning fast-pace rather than complex cutting edge layouts, you should pick CSS frameworks over the CSS grid.

Moreover, CSS frameworks like Materialize or Bootstrap are much more than Grid systems, In fact, grids are just a tiny feature of a CSS framework. If you want to build different UI components like navbar, carousel, sliders, cards, accordions, tabs, pop-ups, modals, buttons, etc at lightning pace with a minimum CSS styling then you should be using CSS frameworks.

Now, that we have a good understanding of what a CSS Framework is! It is time to dwell on a CSS Grid layout.

What Is CSS Grid Layout?

CSS Grid is a layout technique use grid on your web page. It is a technique that is only described in CSS and not in HTML. So, to adhere to the needs of web developers, CSS grids provide the ease of developing complex and twisted responsive web design. If you are a web developer or web tester then you already know the relevance of a responsive website. Before you start off your next web project, make sure to avoid these top mistakes for responsive web design.

A simple CSS Grid example looks like below:

The above image shows different grids for different elements of a web page like Header, Sidebar, etc.

As you can notice, CSS Grid helps in the alignment of the elements according to the web developer. Choosing CSS Grid vs CSS Frameworks can allow you to deliver a complex web application with a lot of tables, in a very short time.

While there is no way that CSS Grid can match up with the versatility of CSS Frameworks, there are some times when a developer has to think about the two for one particular project or certain parts of the project. CSS Grid has evolved better than before expanding its functionalities. Considering you have to build a layout that is visually appealing, it is very easy if you go for CSS Grid. Using CSS Grid layout, it minimizes the efforts and layout complexities. So, if you need to change the structure anytime afterward, the other structures won’t be affected to a greater extent.

For example, let’s say you have two grids side by side and an image after the grids in the same plane. Now, in the future, if you want to add another grid in the same plane, CSS Grid will divide the required space equally without affecting the coordinates of the image.

Grids are very adaptable to the space assigned to them. It helps the elements never overlap or create certain layout problems.

Advantages Of CSS Grid Layout

Building complex 2D Grid Systems: Use of CSS Grid vs CSS framework is ideal in cases where you need to build complex 2-dimensional layouts which popular frameworks like bootstrap cannot offer. Building complex layouts like – Mosaic Photo Gallery or Masonry Layouts is not possible to build without using the CSS grid. The majority of CSS frameworks offer basic 12 column responsive grids that have a limited application unfit for modern cutting edge design.

Reduced Code Size: Another major advantage of using the CSS grid over CSS framework is the reduced code size. With CSS Grid you can build any form of grid layout system imaginable only by relying on Native CSS style rules. On the other hand, for realizing Grid layouts using CSS frameworks, the entire framework/library CSS file has to be linked to your project. This is an unnecessary bloatware that is going to add to your project size and reducing the load speed of your website. So, when a user visits your website, a complete list of framework/library files are fetched from the server along with other resources before the webpage loads. This will drastically increase the load time of your website and hurt in SEO rankings on SERP and higher bounce rate. CSS Grids, unlike the framework, does not require any external stylesheet to work. This helps in the faster loading of your website and even in the slower connection, you do not need to worry.

Layout is not affected: A web page consists of many elements. These small elements combine together to form a layout of the web page. A layout is what you see and how you see. For example, I have placed two images side by side and a moving news column beside that. Now there are three elements here and they come under the layout. Now, if I want to change the size of the first image, maybe the column of news will get moved to the next row. This will move the elements present in the next row and the whole layout is affected. This can happen anytime since changing the layout of elements is a very common thing in web development. CSS Grids helps in this. When we use CSS Grids, the change that we do after the development does not affect the layout of the website. Now, instead of images I have a CSS Grid and I change the size of the grid, later on, it will not affect the column news panel at all.

Faster development: Frameworks are huge and heavy but Grids are short and light. They are easy and quick to learn. A framework has a lot of things inside. A complete frame for your website. These things often are related to each other. A good framework user will use all of this to develop something unique because frameworks are often blamed for their monotonic layouts. This will take time and this time pushes the time limits for your projects if any. This is not the case with grids. Grids are very light and contain very few concepts as compared to the frameworks. You can easily get over the concepts in the grid and start development. There are no complexities in developing grids. You do not need to have different elements linked to each other. Grids do not give monotonic layouts. It completely depends upon the developer. Hence, the grid development is faster than the frameworks.

A drawback of CSS Grid Layout

Development: CSS Grids is yet to be developed in a way frameworks are developed. This is because grids are fairly new and many projects had started before grids came into the picture. This means if you are working on that project (in a company or open-source), you are bound to be inclined towards the frameworks. If you know something well enough, you will definitely try to implement that thing. Starting to use CSS Grids above Frameworks without knowing about it completely is rare. But again, grids are gaining popularity among the new projects. It has been some time since the grid is in the market and is used exhaustively. It is still the start for grids if I compare to the grandeur of frameworks but soon it will be a more focussed topic for the development.

As I said, CSS Grid and CSS Framework are two very important aspects of CSS. While some are sure that they will use CSS Framework, some are sure about CSS Grids. There are also people who decide according to the need about what they will be proceeding towards. Since we saw some benefits of grids, let’s see how beneficial is CSS frameworks.

Cross Browser Compatibility Of CSS Grid

The largest hurdle faced by CSS Grid faced on the path to wider adoption by the web developer community was its poor cross browser compatibility and support. A couple of years back until 2017, CSS Grid was only supported by Google Chrome and Firefox while Internet Explorer, Microsoft Edge, Opera, and even Safari did not provide browser support for the CSS grid. Using the CSS grid in production-ready code would mean either serving a massive user base still using legacy browsers messy and broken webpages or wasting hours to somehow code feasible float/flexbox fallbacks. This is why the majority of developers were stuck with using either Float or Flexbox based Grid layouts or relied on CSS frameworks like Bootstrap, Materialize or Bulma to create 12 column grid layouts. This is where CSS frameworks held a key advantage over CSS Grid and continued their dominance.

However, since 2017, CSS Grid has witnessed a massive improvement in browser support. This has completely eroded the key advantage CSS frameworks enjoyed before. As of November 2019, the CSS grid is supported by 93.85% browsers (Can I Use stats). Previously unsupported browsers like IE (v10-11), Edge (v16+), Opera(v44+) and Safari(v10.1+) now support the CSS grid including mobile browsers for both android and iOS.

When Should You Use CSS Grid?

One of the biggest arguments against the use of CSS frameworks like Bootstrap, Materialize or Bulma is excessive Code Bloating. Tons of needless CSS styling rules that will never be used will weigh down your project. If you want to keep your website compact in size to boost load speed and performance, CSS Grid is the better choice. Another reason to pick CSS grid over CSS framework is that with frameworks like bootstrap, you’ll be stuck with a primitive 12 column grid system. Achieving a 5 or 7 or 9 column layout would be very difficult. This problem is completely eliminated by the CSS grid. If your project requires a highly custom layout that cannot be achieved by a basic 12 col grid, the CSS grid is the right fit for your needs. The third argument in favor of the CSS grid is that it offers you unmatched flexibility to rearrange sections/areas. With CSS framework Grid systems you can only achieve basic responsive changes in layout according to screen sizes. But CSS Grid offers much more powerful flexibility to complete change layout structure in both horizontal and vertical directions. For eg – moving your vertical sidebar menu from side to top placed horizontally. The final reason because of which you might want to pick CSS grid over CSS frameworks is getting respite from ugly HTML markup with ever-growing Class names and div tags that make your HTML code messy and difficult to read. With the CSS grid your HTML markup will remain untouched.

Future of CSS Grid vs CSS Frameworks

This question pops up in the minds of many developers who are used to using the frameworks and grids for their use.

CSS Grids have continued to gain popularity ever since they were made cross browser compatible. Grids are also underway major developments and have introduced a CSS Subgrid. This will provide you to develop a website as you want on a more granular level than your normal CSS Grid Layout, a better and lighter layout with improved CSS design. However, the cross browser compatibility for CSS Subgrid is not looking so well as of now.

However, if the CSS Grid Layout was accepted by various browsers, it is only natural to believe that CSS Subgrid won’t be too far long. Rigorous users of CSS Grid layout are hoping for CSS Subgrid to be cross browser compatible soon.

CSS Frameworks as of now are being adopted by many huge firms. The reason is its popularity. CSS Frameworks are very popular and are used today by the majority of the developers because of saving time and energy. However, the future of CSS frameworks is looking a bit grim due to the introduction of CSS Subgrids. However, as of now, web developers are working on frameworks that will be much lighter in weight and will have a possibility of changing the layout of the website according to the usage.

Rigorous users of CSS frameworks believe that CSS Grid should dissolve to be a part of CSS Frameworks. Whereas many agree to it, the challenge is that the framework’s weight will increase much more which we want to decrease. But the future can only be seen in the future and we will see whether these two roads will merge or diverge in the coming years. And whatever the scenario would be, I will be here to give you an update. Till then, Adios!

19 Chrome Extensions For Web Developers & Designers In 2019

nikhiltyagi04 — Mon, 22 Jul 2019 10:54:38 +0000

Google Chrome, is without a doubt, the most popular browser in the world. In terms of user share, Google Chrome is well ahead of other major browsers like Mozilla Firefox, Safari, Opera, Microsoft Edge, etc. You can check how other browsers would fare in comparison to Chrome in our blog on the most important browsers for cross browser testing. In just over 10 years, Google Chrome has managed to conquer well over 65% of the market share. One of the key factors behind its meteoric rise is its huge library of extensions that truly sets it apart from the rest, especially for web designers and developers. However, offering a library of extensions as vast as it does, it becomes a bit troublesome for its users to handpick the extensions for their daily needs.

Being a web developer myself, I realize the complete ruckus involved in selecting an extension that could boost my daily basis productivity. It has happened so often that my colleagues refer me some new Chrome extension or two that has drastically helped me deliver better website faster. Looking back I realize, that I have been missing out on these essential Chrome extensions for web developers for months until I was notified by a co-worker. Many times I have helped my colleagues too & I am sure they must be feeling the same way as I did. It is a part of being human when you get to know about something that could have helped you do things faster, you end up saying “If only I knew about it earlier”.

In this article, I am going to highlight meticulously crafted 19 Best Chrome extensions for web developers & designers to boost their productivity and make their lives easier.

1. ColorZilla – Color Picker and Generator

ColorZilla is one of the oldest color picker extension launched over 8 years ago and it has successfully maintained its mantle as the best color picker and an eyedropper Chrome extension for developers or designers even today. ColorZilla will enable you to get a color reading from any pixel on the browser on the fly and paste it in any other program in RGB HEX formats. Just like Site Palette, ColorZilla also enables you to generate gradient colors and extract color palettes from any website. The extension also maintains a color history index of recently color picks.

2. Site Palette – Color Palette Generator

3.Font Face Ninja – Font Identifier

4. Marmoset – Code Snapshot Generator

5. LambdaTest Screenshots – Cross Browser Testing Extension

As a developer, I have often noticed fellow developers missing out on testing what they have built. Sometimes, that careless attitude brings shame to the product, outages bringing discomfort in your office environment. And you feel silly once you get to the root cause of it, and realize that the web application wasn’t working as well for just one browser. This could be due to a deprecated CSS feature, or any other web element that is not so well supported by a browser.

I won’t blame developers for missing out on cross browser testing, as it isn’t feasible when you look at it. Installing multiple browsers, devices, through VMware or any other setup is a hassle for all. This is where LambdaTest comes in handy. LambdaTest provides a cloud-based platform to perform cross browser testing on 2000+ real browsers and browser versions for different devices, so you could end up with an eye-appealing, robust, and cross browser compatible website. For desktop devices, you get to test on both Windows and macOS. For mobile devices, you get to test on both android & iOS.

LambdaTest came up with a Chrome extension to help a user perform automated screenshot testing in bulk. The best part? You can perform screenshot testing across 25 devices in a single go. If you found any UI anomaly then you can share it with your colleagues on your preferred project management tool. Empowering you to perform cross browser testing in a jiffy, LambdaTest Screenshot is certainly one of the best Chrome extensions for developers, designers, and obviously testers, across the world.

6.Page Ruler – Dimension and Size Checker

7. Dimensions – Dimension and Size Checker

8. Check My Links – Broken Link Checker

9. Clear Cache

Clear Cache extension helps to wipe clean your Cache along with browsing data with a single click without wasting time with any popups, dialogue windows or Chrome setting window. Furthermore, you can even customize how much data you want to clear on the extension option settings – App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords, and WebSQL. You can either delete cookies globally or for specific domains. One of the handiest Chrome extension for developers, designers, and everyone else too.

10. Wappalyzer – Site Analyser(Technology Identifier)

One of the biggest hurdles that developers face when coming across an impressive website face is the intriguing question – Which technologies have been used to make this website? This is where Wappalyzer comes to the rescue. This amazing extension is a cross-platform tool created by Elbert Alias in 2009 that uncovers the names of technologies used to create a particular website. It automatically detects over 1000 technologies like site generators, frameworks, libraries, plugins, CMS, databases, server software, widgets, analytics tools, etc. You can either use the Wappalyzer website or use the extension for quick usage. This Chrome extension for developers and designers has been a true lifeline for making appealing websites.

11. Ghostery – Privacy Tool

12.JSON Viewer – JSON Beautifier And Viewer

13. Window Resizer – Screen Size Mockup

Other than cross browser testing, LambdaTest also provides responsive testing where you get to visualize your website or web app on real mobile browsers. You can test across 46 mobile devices, both iOS & android, in a single test session.

14.Corporate Ipsum – Lorem Ipsum Generator

15. Sessions Buddy – Tab/Session Manager

Google Chrome is infamous around the world for its massive appetite for RAM usage and developers with slower systems would constantly face screen freezes and crashes when working with multiple tabs. This is why effective tab management is indispensable especially when you lose the track of tabs you have opened looking for design inspiration or hashing out a solution on StackOverflow. The perfect tool for this mammoth problem is Sessions Buddy! Sessions Buddy is the most powerful Chrome extension for developers & designers to help them with browser tabs management. It also offers a bookmark manager with a simple and beautiful interface. It helps you to save sessions and restore them later when you open them on the fly. Therefore, avoiding clutter and keeping memory free. It allows you to manage all tabs in one page, organize them by topic and also offers quick search to look for a specific tab. Also, you need not worry about losing your session if you accidentally close your browser window or your system suffers a crash. Sessions Buddy will restore all your tabs as you left them.

16. CSS Viewer – CSS Property Viewer

Instead of wasting time looking for CSS properties of an element in the inspector window or the source code, CSS Viewer extension extracts all the valuable CSS properties and shows them in an organized manner inside a floating window. Simply hover over any element on the web page you want to inspect and the CSS viewer floating window will list out all the key CSS properties under categories – 1. Font and Text (font-family, font-size, font-weight, line-height, text-decoration, text-align), 2. Color and Background (color, background-color, background-position), 3. Box Model Properties (height, width, padding, margin), 4. Positioning, 5. Effects (transforms and transitions) and finally 6. Miscellaneous properties.

17. EditThisCookie – Cookie Manager

18.Checkbot – Site Auditor (SEO/Page Speed/Security)

I like to frequently run audits on my websites using Checkbot & find it a very convenient Chrome extension for developers and designers, around the globe.

19. Web Developer – Web Development Tools Package

An indispensable Chrome extension for developers and designers, this extension adds a toolbar with a complete suite of web development in your browser. The tools offered by this extension are divided into 10 separate tabs – Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize and Tools.

Conclusion

Variable Fonts vs Static Fonts & Cross browser Compatibility

nikhiltyagi04 — Thu, 18 Jul 2019 11:35:28 +0000

One of the key cornerstones of Modern web design is Typography. For those who are aware of the eminence of typography in web experience, no explanation is necessary. For those who don’t, no explanation would suffice. While the web is entering a new, exciting and uncharted domain, web fonts have remained static and stagnant since time immemorial. That all changed with the arrival of ‘Variable Fonts’ which have revolutionized the way we see and interact with web fonts. Variable Fonts have unleashed a whole new world of creative possibilities along with enhancing website’s readability, accessibility, performance, flexibility, and responsiveness. Developers no longer need to rely on standard static fonts bound with fixed design limitations but rather embrace variable fonts to unlock thousands of typographic variations along with font animations and creating unique custom font styles.

Variable fonts are part of ‘OpenType’ specification originally developed as a joint collaborative project between the 4 major giants – Apple, Microsoft Adobe and Google. The key concept behind variable fonts is to utilize unlimited font style variations of a specific typeface by relying on just a single font file. This allows a developer to fully utilize the potential of RWD(responsive web design) by modifying or animating the typeface based on device viewport, device type, device orientation, mouse events, etc. On the contrary, standard static font requires separate font files for each font style, resulting in dreadful site performance.

In this article, we will explore what variable fonts are, their advantages over static fonts, how to use them in your web pages and how to add necessary static font fallbacks for unsupported browsers by leveraging the power of Lambdatest Cross browser compatibility Cloud tool.

Problem With Traditional Static Fonts

Before diving deeper into variable fonts, here is a small excerpt that explores the limitations and problems that you would encounter while using traditional static fonts. Let’s say for your next web project, you need to select two static font typefaces – ‘Roboto’ for headings and ‘Open sans’ for paragraph texts. You are essentially selecting a ‘font-family’. A font family, in turn, comprises of various ‘font-styles’ – variations based on different font weight and italics.

In our example case, let’s assume you require the following font style variations –

‘light 300’
‘regular 400’
‘semi bold 600’
‘bold 700’
‘regular 400 italic’

You would need to download separate files for each of the font styles (or use google fonts embed link), for both the typefaces – ‘Roboto’ and ‘Open Sans’. As you can see in the image below, Google fonts will display a warning alert, indicating a poor load time for our test case needs. This will in turn adversely affect your website’s performance. The load time indicator will keep dropping from fast to moderate to slow as we keep adding different font styles. Slower load time would indicate low ranking on Google SERPs(Search Engine Result Pages). Wondering why? We have explained it in great detail in our blog where we talked about theimportance of testing a mobile website.

Although ‘Roboto Medium’ and ‘Roboto Bold’ are very similar and belong to the same font family, each one of them has its own independent font file.

Google Fonts – ‘Roboto’ and ‘Open sans’ font styles selected

As per our example case for ‘Roboto’ and ‘Open Sans’, you would end up needing 22 files with the combined size of approximately 3mb! These font files are downloaded by every visitor’s browser on your website to accurately display the text with the intended font face. This causes a surge in website load time and would create a frustrating user experience for any visitor especially on a slower mobile connection.

Static font files – ‘roboto’ and ‘open sans’

CSS stylesheets, JavaScript files, plugins, images, videos, analytics trackers and other dependencies contribute to the size of the website which is directly proportional to the loading speed. A website’s loading speed is arguably the biggest performance factor for SEO(Search Engine Optimisation) and user experience. Therefore, developers in their quest to optimize their websites come to a compromise to let visual appearance suffer in favor of better performance and usually restrict themselves to a couple of font faces and not more than 3-4 font styles as each additional font file is a burden on the page performance.

Traditional static fonts have zero flexibility and are bound with limited number of fixed font styles like ‘light’ , ‘regular’ , ‘regular-italic’ , ‘semi-bold’ , ‘bold’ , ‘extra-bold’. For example, ‘open sans’ font family has just 10 styles compared to ‘Roboto’s’ 12. Some font families like ‘Lobster’ and ‘Abril Fatface’ have just a single font style available. This is where variable font comes to your rescue unlocking the possibility for developers to use potentially thousands of font style variations from a single file without compromising on performance.

What Are Variable Fonts?

A Variable font comprises of an entire typeface or commonly known as font family in a single font file instead of having separate font files for every font style variation. By the help of CSS @font-face and style rules, thousands of different font weight, width and style permutations can be created. Moreover, unlike static fonts, variable fonts supports CSS transition and animation properties that help to achieve smooth and fluid shifting animations between various font styles. Variable Fonts also offer the ability to create a custom font style. This is quite useful for creating unique branding and Logo designs that can set your designs apart from the rest. Are you aware of the top 17 UI Design mistakes that lead to failure of your website?

You must note that although the size of a variable font file is slightly larger compared to the traditional static font file, on a whole a variable font offers much better efficiency. Taking into consideration that on an average, you would require at least 4 to 5 font style variations for each font family, a single variable font file size is significantly smaller than the combined size of 4-5 static font files.

As far as the history of variable fonts are concerned, and how it came into inception, this feature was part of ‘OpenType’ font format version 1.8 specification released in 2016-17 by the collaboration of one of the biggest giants in design and web space – Microsoft, Apple Google, and Adobe. OpenType format is an extension of TrueType format, therefore has “.otf” or “.ttf” extension.

How Do Variable Fonts Work?

The key notion behind Variable fonts is the concept of “Axes of Variations”. These axes control all the aspects of the font style – how bold or light the font letters are, how wide or narrow the letters are or whether the letters are italic or not. OpenType Font specifications define 2 kinds of Axis of variations –

Standard Axes of variation
Custom Axes of Variation.

Standard Axes of Variation

OpenType specs defines 5 standard Axes of variations, each represented by a 4 character long tags tags comprised of small case letters-

Weight “wgth” Axis: Controls the variable font’s weight. The value can vary from 1 to 999. The value is controlled using the font-weight CSS property.
Width “wdth ” Axis: Controls the variable font’s width. The value is in % and can usually vary from 0% to 100%(or higher). Higher values like for example 120% or 150% will be adjusted to the highest permitted value as defined by the font. The value is controlled using the font-stretch CSS property.
Slant “slnt” Axis : Controls the variable font’s slant. The value is in deg and can vary from -90deg to 90deg. By default set to 20 deg. The value is controlled using the font-style CSS property set to oblique.
Italics “ital” Axis: controls whether the variable font is italics or not. The value is controlled using the font-style CSS property set to ‘italic’ or ‘none’. In order to avoid confusion with the slnt axis, set font-synthesis: none;
Optical-Sizing “opsz ” Axis: controls the variable font’s optical sizing. The value is controlled using the font-optical-sizing property CSS property set to either ‘auto’ or ‘none’. Optical Sizing comes into play if you wish to increase or decrease the overall stroke thickness of letters based on the overall font size.

Apart from defining the values of the standard axis of variations using font-weight, font-style, font-stretch, and font-optical sizing properties, there is another way that we will discuss in a moment.

Custom Axes of Variation

OpenType Spec allows you to define as many custom axis of variation as you like. The one key difference to remember is that unlike Standard axes of variations which are defined by using 4 characters long tags of small letters, the Custom axis of variations is defined by using Capital letters.

For example, a variable font called ‘Decovar’ has a custom axis of variations –

SKLA: Inline Skeleton
BLDA: Inline
TRMA: Rounded
SKLD: Stripes

As discussed above there are 2 ways of defining values for axes of variations at your disposal for implementing variable fonts –

1. Using CSS properties associated with each axis – font-weight, font-stretch, font-style and font-optical-sizing properties.

heading {
  font-weight: 650;
  font-style: oblique 80deg;
  font-stretch: 75%;
  font-optical-sizing: auto;
}

2. Using “font-variation-settings” property
Second way to define font variation axes for implementing variable fonts is by using a new property called – “font-variation-settings” , introduced by W3C as part of CSS Font Modeule Level 4 recently.Syntax for the new property is

font-variation-settings: ‘wgth’ <value>, ‘wdth’ <value>, ‘ital’ <value>, ‘slnt’ <value>, ‘opsz’ <value>, ‘PROP’ <value>,…… ;

Here is an example below –

.heading {
/*
  font-weight: 650;
  font-style: oblique 80deg;
  font-stretch: 65%;
  font-optical-sizing: auto;
*/
  font-variation-settings: "wght" 650, “slnt” 80, "wdth" 65, "opsz" 70;
}

Note: Standard/Registered Axes of variations can be defined using both the methods while Custom Axis of variations can only be set using the second method.

Differences between the 2 methods –

Values for ‘font-optical-sizing’ is ‘auto’ or ‘none’. This property can only be used to turn off or turn on optical-sizing. However if you are using the second method – ‘font-variation-settings’, you can add a numerical value. For example –

 font-optical-sizing: auto;
font-variation-settings: "opsz" 70;

You do not need to add a % symbol when setting the value of ‘font-stretch’ when using ‘font-variation-settings’. For example –

font-stretch: 65%;
font-variation-settings: "wdth" 65;

- Value for ‘font-style’ italics is either ‘none’ or ‘italic’. However if you are using ‘font-variation-settings’ property, the value can be either ‘0’ or ‘1’. For example –

font-style: italic;
font-variation-settings: "ital" 1;

- You do not need to add a deg symbol when setting the value of ‘font-style’ slant when using ‘font-variation-settings’. For example –

font-style: oblique 80deg;
font-variation-settings: "slnt" 80;

Both methods will result in the same output. However, as per W3C recommendations, it is advised to use the first method – font-weight, font-stretch, font-style and font-optical-sizing properties over the second method – “font-variation-settings” for controlling values of the five standard axes of variations. This helps browsers to comprehend and have an insight into the meaning of all the font variations and apply it to other formats as well. However, as discussed above, for controlling custom axes of variations, font-variation-settings property is necessary.

Cross Browser Compatibility Support For Variable Fonts

Cross Browser Compatibility table for Variable Fonts

As of June 2019, variable fonts are supported by 84.17% of user browsers worldwide. The current versions of all major browsers provide full support for this feature with the only exception being the much-dreaded Internet explorer which is notorious for its poor browser support. Among desktop browsers – Microsoft edge 17+, Google Chrome 66+, Firefox 62+, Safari 11+, Opera 53+ while among mobile browsers – Chrome 74, Firefox 66, iOS Safari 11+ and Android browser 67 provide support for Variable fonts. There are no polyfills or other fixes to provide cross browser compatibility for variable fonts. If your website visitors are still using IE or older browser versions then variable fonts might not be your cup of tea. However, by using @supports CSS feature queries , you can provide fallbacks for unsupported browsers to ensure a uniform experience to a certain degree.

How LambdaTest Can Help In Cross Browser Testing?

LambdaTest is a cloud-based, cross browser testing tool which offers 2000+ browsers & browser versions to help you ensure how well your website fares across different desktop, & mobile browsers. It offers numerous services for web-app testing these include:

Responsive website testing
Automated bulk screenshot testing across different browsers
Visual regression testing for a pixel to pixel comparison
Selenium Grid to help you perform automated cross browser testing
Live-interactive cross browser testing experience using virtual machines running on cloud. This service is called “Real-time testing” at LambdaTest. I will be making use of this service offered by LambdaTest to interact with different browsers in real-time for validating cross browser compatibility of variable fonts.

PERFORM CROSS BROWSER TESTING ON CLOUD

2000+ Browsers AND OS

FREE SIGNUP

With that said, let’s head back to performing animation using variable fonts.

Incorporate Variable Fonts Using CSS @font-face Rule

To incorporate variable fonts in your stylesheet, use the CSS @font-face rule which allows you to load any custom fonts on a webpage. You must first define a name for the font followed by the source and font format followed by value range for each variation axis. For example:

@font-face {
  font-family: "amstelvar";
  src: url("/fonts/amstelvar.ttf") format("truetype-variations");
 /* Define value range for each variation axis */
  font-weight: 1 999;
  font-stretch: 0% 100%;
  font-optical-sizing: 0 100;
}

Note that standard static fonts have formats “truetype” or “woff”/”woff2”. In order to distinguish between static fonts and variable fonts set font format to either “truetype-variations” or “woff2-variations” indicate the browser that it is a variable font. Majority of variable fonts would have .ttf format. However, it is recommended to use .woff or .woff2 formats for better performance and smaller sizes. You can convert your fonts to woff2 using the popular google command line toolhere.

Below is an example code for incorporating a variable font named “Amstelvar”. You can alter the values of “wgth” weight, “wdth” width, and “opsz” optical sizing axis either by using axis CSS properties or by using font-variations settings.

@font-face {
   font-family: 'amstelvar';
   src: url('/Amstelvar-Roman-VF.ttf') format("truetype-variations");
   font-weight: 1 999;
   font-stretch: 0% 100%;
   font-optical-sizing: 0 100;
}
.heading-1 {
   font-size: 70px;
   font-family: 'amstelvar';
   /* Using CSS properties */
   font-weight: 850;
   font-stretch: 90%;
   font-optical-sizing: auto;
   /* Using font-variation-settings property */
   font-variation-settings: "wght"850, "wdth"90, "opsz"90;
}
.heading-2 {
   font-size: 50px;
   font-family: 'amstelvar';
   /* Using CSS properties */
   font-weight: 100;
   font-stretch: 20%;
   font-optical-sizing: auto;
   /* Using font-variation-settings property */
   font-variation-settings: "wght"100, "wdth"20, "opsz"30;
}
.heading-3 {
   font-size: 40px;
   font-family: 'amstelvar';
   /* Using CSS properties */
   font-weight: 500;
   font-stretch: 70%;
   font-optical-sizing: none;
   /* Using font-variation-settings property */
   font-variation-settings: "wght"500, "wdth"70, "opsz" 0;
}

Amstelvar Variable Font

Animating Variable Fonts

Variable fonts can be used to create creative font animations. There are two ways to achieve this task –

CSS transition property
CSS @keyframes animation rule.

As stated earlier, I will demonstrate both of them below using LambdaTest, a cross browser testing cloud to show these animations of variable fonts over different browsers.

Animating Variable Fonts Using CSS Transition Property

CSS transition property can be used in cases when font animation is linked to an event like a mouse click or mouse hover. The code snippet below is an example of how to animate the variable font ‘Amstelvar’ using CSS transition property when the mouse cursor has hovered over it. When the text class ‘heading-3’ is hovered, the ‘wgth’ weight axis value is changed from 300 to 999, ‘wdth’ width axis value is changed from 40% to 70% and ‘opsz’ optical-sizing axis value is changed from 0 to 70.

@font-face {
   font-family: 'amstelvar';
   src: url('/Amstelvar-Roman-VF.ttf') format("truetype-variations");
   font-weight: 1 999;
   font-stretch: 0% 100%;
   font-optical-sizing: 0 100;
}
.heading-1 {
   font-size: 70px;
   font-family: 'amstelvar';
   font-variation-settings: "wght"850, "wdth"90, "opsz"90;
}
.heading-2 {
   font-size: 50px;
   font-family: 'amstelvar';
   font-variation-settings: "wght"100, "wdth"20, "opsz"30;
}

.heading-3 {
   font-size: 40px;
   font-family: 'amstelvar';
   font-variation-settings: "wght"300, "wdth"40, "opsz"0;
   transition: font-variation-settings 2s ease;
}
.heading-3:hover{
   font-variation-settings: "wght"999, "wdth"70, "opsz"70;
}

Now, let us perform cross browser testing to evaluate the difference of rendering between Opera & IE 11. Note that variable fonts are supported in the desktop version of the Opera browser but not in Opera mini which is meant for mobile. Below I am comparing the cross browser compatibility difference between desktop Opera & IE11 using LambdaTest.

First, we have a look at Opera Desktop version 61 Dev.

_ Opera Desktop 61 Dev: Animation of Variable Font ‘Amstelvar’ using CSS transition property”_

Now, we have a look at Internet Explorer 11.

_ IE 11: Animation of Variable Font ‘Amstelvar’ using CSS transition property”_

After performing cross browser testing, we ensured that the CanIUse table represented above holds correctly with respect to variable fonts implementation across different browsers.

Animating Variable Fonts Using CSS @keyframes Rule

Apart from CSS transition property, there is another way to animate Variable Fonts using @keyframes animation rule. The code snippet below is an example of creating an infinite animation with an animation duration of 3s changing the ‘wdth’ width axis value from 100 to 600.

@font-face {
   font-family: 'amstelvar';
   src: url('/Amstelvar-Roman-VF.ttf') format("truetype-variations");
   font-weight: 1 999;
   font-stretch: 0% 100%;
   font-optical-sizing: 0 100;
}
.heading {
   font-size: 40px;
   font-family: 'amstelvar';
   animation: myFont 3s ease infinite;
 }
@keyframes myFont{
   0%{
       font-variation-settings: "wght" 100;
   }
   100%{
       font-variation-settings: "wght" 500;
   }
}

Time to perform cross browser testing and see how our code works across different browsers. In this example for variable fonts, we will compare IE 11 with Safari, running on Windows 10 & macOS Mojave respectively.

First, we have a look at Safari Desktop Mac mojave.

Animating Variable Font ‘Amstelvar’

Now, we have a look at Internet Explorer 11.

You may not be certain if variable fonts are the right call for your website. However, after performing cross browser testing for variable fonts, you are certain that they won’t be working for website visitors who are using IE 11 or below version.

So what can you do if font variables won’t work for you? If your a considerable amount of visitors on your website are coming through Internet Explorer, how can you present them with well designed font variations? Don’t worry, I have got a solution for you.

Fallbacks For Unsupported Browsers

The easiest way to provide a fallback for variable fonts in unsupported legacy browsers like Internet Explorer or mobile browsers like opera mini and UC browser is to provide two file versions of the same font inside the @font-face Rule. The first version is the variable font file having a ‘woff2-variations’ or ‘truetype-variations’ format while the second file is the traditional static font file having a ‘woff’, ‘woff2’ or ‘ttf’ format. Without providing static font format, variable fonts will not render on any unsupported browser.

, For example, one of the most popular variable fonts ‘IBM Plex’ is available in both variable and static font formats. If you want to have fallback for IBMPlex with two font-styles having font-weights 400 and 700 in unsupported browsers, add the following code –

@font-face {
   font-family: 'IBMPlex';
   src: url('IBMPlex-variable.woff2') format('woff2-variations'),
       url('IBMPlex-regular.woff2') format('woff2');
   font-weight: 400;
}

@font-face {
   font-family: 'IBMPlex';
   src: url('IBMPlex-variable.woff2') format('woff2-variations'),
       url('IBMPlex-regular.woff2') format('woff2');
   font-weight: 700;
}

Browsers which provide support for variable fonts feature will download the ‘woff2-variations’/ ‘truetype-variations’ font format while those browsers which don’t support this feature will download the ‘woff’, ‘woff2’ or ‘ttf’ formats as specified inside the @font-face rule.

To make sure that browsers download the correct font format as intended based on their feature support, make use of @supports CSS feature queries as shown below –

.heading {
   font-family: 'IBMPlex'sans-serif;
   font-weight: 700;
}

@supports (font-variation-settings: normal) {
   .heading {
       font-family: 'IBMPlex', sans-serif;
       font-variation-settings: "wght"850, "wdth"90, "opsz"90;
   }
}

Here is another example using the variable font ‘Source Sans’ by Adobe. I will once again use LambdaTest Cross browser compatibility test tool to view my webpage with variable font on modern browser like Chrome and test for fallback static font on an unsupported browser like Internet Explorer 11. Links for – SorceSans Variable and SourceSans Static. Download the ‘.ttf’ formats of both versions.

@font-face {
   font-family: 'SourceSans';
   src: url('SourceSansVariable-Roman.ttf') format('truetype-variations'),
       url('SourceSansPro-Regular.ttf') format('truetype');
   font-weight: 400;
}

@font-face {
   font-family: 'SourceSans';
   src: url('SourceSansVariable-Roman.ttf') format('truetype-variations'),
       url('SourceSansPro-Bold.ttf') format('truetype');
   font-weight: 700;
}

.heading-1 {
   font-size: 70px;
   font-family: 'SourceSans';
   font-weight: 700; /* For IE */
}

.heading-2 {
   font-size: 50px;
   font-family: 'SourceSans';
   font-weight: 400; /* For IE */
}

.heading-3 {
   font-size: 40px;
   font-family: 'SourceSans';
   font-weight: 700; /* For IE */

}

/* For Modern Browsers */
@supports (font-variation-settings: normal) {
   .heading-1 {
       /* Using font-variation-settings property */
       font-variation-settings: "wght"850;
   }

   .heading-2 {
       /* Using font-variation-settings property */
       font-variation-settings: "wght"100;
   }

   .heading-3 {
       /* Using font-variation-settings property */
       font-variation-settings: "wght"500;
   }
}

Let’s perform cross browser testing and observe if our fallbacks are working as we thought it would. This time I will be comparing cross browser compatibility difference between Chrome 75 beta & IE 11.

Oh yeah, guess I failed to mention before that LambdaTest also offers you browsers that are in beta & dev stage, so your website stays ready for the browser update when the time comes.

First, we have a look at Chrome Desktop version 75 Beta.

Source Sans variable font is supported by Chrome displaying multiple ‘wgth’ weight axis values from a single variable font file.

Now, we have a look at Internet Explorer 11.

Source Sans variable font not supported in IE . 2 static font files – Source Sans ‘regular’ and ‘bold’ are loaded as fallbacks.

If you want to learn more about feature detection using @supports CSS feature queries, you can refer to my previous blog on CSS feature detection for cross browser compatibility.

Resources

There are two amazing tools that I would recommend where you can discover, play along and experiment with variable fonts before incorporating them into your project.

AxisPraxis

V-Fonts

Although the selection of variable fonts at your disposal at the moment is not that large compared to traditional static fonts. But the selection is growing by the day and is well poised to expand in the future. For ensuring better performance and visual aesthetics, this is a small trade off.

We also used a cross browser testing tool – LambdaTest to test our website in old legacy browsers and check whether your fallbacks and polyfills are working properly or not.

LambdaTest is trusted by 60,000+ organizations worldwide for performing extensive cross browser testing at scale on cloud. Perform a free sign up and avail a lifetime access for all your cross browser testing needs.

Should You Choose Variable Fonts Over Static Fonts For Your Website Or Web App?

A lot of developers might be hesitant to try out variable fonts because of its perceived lack of universal cross browser compatibility support. However, as discussed above, this perception is rather deceptive. With the exception of Internet Explorer, all other major browsers including Microsoft Edge offer complete support for this feature. Variable Fonts present a whole new world of exciting possibilities for developers to explore and is one of the most exciting additions to CSS in recent times. Having the ease and liberty of using thousands of different font styles from a single file, along with the ability to animate and add transforms to your fonts has pushed typography to the forefront of web design once again. Here are the top 19 Typography tips for mobile web that will change the way you design. Last but not least, keep an eye out for newly emerging web design trends as variable fonts continue to gain traction in the developer community. Cheers!

How To Create A Cross Browser Compatible HTML Progress Bar?

nikhiltyagi04 — Wed, 03 Jul 2019 14:06:53 +0000

One of the key elements of any modern website that you would have come across on the internet is an HTML progress bar. HTML5 progress elements have become a fundamental part of web design that is used for a wide array of tasks be it to display file download/upload status, file transfer, registration, installation or any task which is in progress due for completion. However, coding an HTML progress bar which offers cross browser compatibility has posed a tricky challenge to developers since time immemorial. Instead of using div tags to create a progress bar, HTML5 provides an extremely ingenious way by the use of HTML5 < progress > tag. In this article, we will discuss what HTML5 progress element is, how to style it using CSS, how to animate it using JavaScript/jQuery, cross browser compatibility solutions for creating an HTML progress bar and finally fallbacks for unsupported browsers. Without further ado, here we go!

HTML5 < progress > Element

The semantic HTML5 < progress > element is used as an indicator to display the state of completion or progress of a task, i.e. the amount of work which is yet to be done. HTML5 < progress > element acts as a visual feedback demonstration for a user to keep tabs on the state of progress of the given task being undertaken. Usually, it is displayed in the form of a progress bar marked with numbers or percentage values.

Note: If you wish to display a gauge(disk space or storage), HTML5 progress element would not be the right choice. You should use HTML < meter > tag instead.

Syntax For Creating An HTML Progress Bar

< progress value="" max="" >< /progress >

The < progress tag > has 2 key attributes – value and max. These 2 attributes define how much part(value) of the total task(max) has been completed at present.

Value: value attribute indicates the amount of task that is completed, which is the current value. It can be any number between 0 to max attribute. In case max attribute is absent, the value can range from 0 to 1. In case, the value attribute is absent, then the HTML progress bar will be indeterminate. It will no longer indicate the current state of completion.
Max: max attribute represents the total amount of work necessary for completion of a task. Value of max cannot be less than 0 and by default is set to 1.

Here is a simple demonstration of HTML progress bar using the HTML5 progress element –

<!DOCTYPE html>
<html>
 <head>
   <title>Progress Bar</title>
 </head>
 <body>
   <span>Progress:</span>
   <progress value="40" max="100"></progress>
 </body>
</html>

Indeterminate vs Determinate States Of HTML5 Progress Element

As we discussed above, a progress element can have 2 states – Indeterminate or Determinate. It all depends on whether the value attribute is mentioned inside the < progress > tag is mentioned or not. In case the value attribute is not specified then the result would be an indeterminate HTML progress bar which does not display the current state of progress. The opposite is true in the case of a determinate HTML progress bar.

Here is an example for both cases –

<!DOCTYPE html>
<html>
 <head>
   <title>Progress Bar</title>
 </head>
 <body>
   <span>Indeterminate Progress Bar:</span>
   <progress max="100"></progress>
   <br><br>
   <span>Determinate Progress Bar:</span>
   <progress value="35" max="100"></progress>
 </body>
</html>

HTML5 Progress Element – Cross Browser Compatibility

As you can see above, the HTML5 Progress element is cross browser compatible across all major desktop and mobile browsers covering 97.45% of the Internet user base as of March 2019. The only major exception is IE9 and below versions. Later in the article, we will explore different ways to code necessary fallbacks to elevate our HTML progress bar cross browser compatibility by using a polyfill to add support for IE8-9.

Styling The HTML Progress Bar

Styling the HTML progress element is an extremely arduous task. The challenge here arises primarily because every single browser interprets the < progress > tag differently. Each of them uses its own specific pseudo-classes to style HTML progress bar. You can see in the figure below how various browsers render a basic HTML progress bar in a different manner. You need to add styling rules separately for each of the three browsers with different rendering engines –

Blink/Webkit Browsers – Google Chrome, Opera and Safari
Moz Browser – Mozilla Firefox
Internet Explorer

If you wish to learn more about how modern browser work and Why Browsers Render Content Inconsistently, you can have a look at my previous article on Feature Detection For Cross Browser Compatibility.

Before moving on to browser specific rules, let us look at the basic HTML5 progress element selector first. We can use the progress selector(or progress[value] selector) to change the background colour, height and the border radius of the progress bar.

progress{
            color: red; /*Works only with edge. Not applied to webkit and mozilla*/
            background-color: #6e6e6e; /*not applied to webkit. Works with firefox and Edge*/
            border: 0;
            width: 100px;
            height: 20px; /*works with all browsers*/
            border-radius: 9px; /*Not appied to value part in firefox. Works with Edge*/
        }

However, the background colour and border radius will not work with Google Chrome and other WebKit/Blink browsers as shown below. In fact, they will remove the default native styling and replace it with a green progress bar and dark grey background. In Firefox, the background colour and border radius rules are applied to the outer progress bar but not to the value. Microsoft Edge obeys all rules as intended.

Now, in order to create a cross browser compatible HTML progress bar with uniform appearance across all browsers, we need to target pseudo-classes for both Webkit browsers(Chrome, Opera and Safari) and Firefox.

Webkit browsers use 2 pseudo-classes to target HTML5 progress element : -webkit-progress-bar and -webkit-progress-value.
- -webkit-progress-bar : Used to style outer progress bar (container). You can change the background colour and the border-radius and box-shadow properties of the progress bar using this pseudo-class.
- -webkit-progress-value : used to style inner value bar. You can use this pseudo-class to change the colour of the value part of the progress bar.
Mozilla Firefox uses a single pseudo class: -moz-progress-bar to style the value element of the HTML progress bar.
Microsoft Edge and IE use : -ms-fill pseudo class to add styling like gradient background to value part of the progress bar.

To sum it up, we now have the following CSS selectors to add styling rules to our HTML progress bar–

 /* NON BROWSER SPECIFIC*/
       progress {
       }
       /* FOR WEBKIT BROWSERS*/
       progress::-webkit-progress-bar {
       }
       progress::-webkit-progress-value {
       }
       /* FOR FIREFOX */
       progress::-moz-progress-bar {
       }
       /* FOR MICROSOFT EDGE AND IE */
       custom-progress::-ms-fill {
       }

Do not forget to reset the default browser styles. To achieve this you would have to set the appearance and border properties to none as shown below –

progress {
            /* RESETS */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
        }

Basic HTML Progress Bar

Now using these WebKit and Mozilla firefox pseudo classes, we can finally create our basic progress bar with light grey background(#777), light blue value progress part ( rgb(20, 240, 221) ), and rounded corners( border-radius: 20px ).


<!DOCTYPE html>
<html>

<head>
    <title>Progress Bar</title>
    <style>
        /* IE and EDGE */
        progress {
            /* RESETS */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;

            width: 300px;
            height: 15px;
            border-radius: 20px;
            background-color: #777;
            color: rgb(20, 240, 221);
        }

        /* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
        progress::-webkit-progress-bar {
            background-color: #777;
            border-radius: 20px;
 }

        progress::-webkit-progress-value {
            background-color: rgb(20, 240, 221);
            border-radius: 20px;
        }

        /* MOZILLA FIREFOX */
        progress::-moz-progress-bar {
            background-color: rgb(20, 240, 221);
            border-radius: 20px;
        }
    </style>
</head>

<body>
   <h1>HTML PROGRESS BAR </h1>
   <span>Progress:</span>
   <progress value="40" max="100"></progress>
   <span> 40%</span>
</body>


</html>

HTML Progress Bar With Striped Gradient Background

We can take our styling a step further to create an HTML progress bar with stripes and gradient background. Simply add -webkit-linear-gradient and -moz-linear-gradient styling rules to ::-webkit-progress-value and ::-moz-progress-bar pseudo classes.


/* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
       progress::-webkit-progress-bar {
           background-color: #777;
           border-radius: 20px;
       }

       progress::-webkit-progress-value {
           background-image:
               -webkit-linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 70%, transparent 70%),
               -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
               -webkit-linear-gradient(left, #1abc9c, #3498db);
           border-radius: 20px;
       }

       /* MOZILLA FIREFOX */
       progress::-moz-progress-bar {
           background-image:
               -moz-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 70%),
               -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
               -moz-linear-gradient(left, #1abc9c, #3498db);
           border-radius: 20px;
       }

       /* MICROSOFT EDGE & IE */
       .custom-progress::-ms-fill {
           border-radius: 18px;
           background: repeating-linear-gradient(45deg, #1abc9c, #1abc9c 10px,#3498db 10px, #3498db 20px);
       }

Animated HTML Progress Bar

Now that you have learnt how to create and style progress bars using HTML progress element, the final step is to add animation. In most of the cases HTML progress bars are used in concurrence with JavaScript or jQuery. We will use JavaScript to add rightward expansion animation from 0 value to max value, incrementing in pre-defined steps. We will use the same striped gradient progress bar we made earlier and add animation to it – First we will create a variable called “progress”. Store the value of progress element of id “custom-bar” inside it. Set the “value” and “max” attributes of HTML Progress element to 0 and 100 respectively. As long as the value of variable “progress” is less than the max attribute value, “progress” variable keeps getting incremented by 10 after every 1 sec. So in 10 seconds the progress bar fill fill up from 0 to max value that is 100.


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>HTML5 Progress Bar</title>
  <style>
      /* CROSS BROWSER SELECTOR*/
      .custom-progress {
          /* RESETS */
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          border: none;

          width: 100%;
          height: 30px;
          border-radius: 20px;
          background-color: #777;
          color: #e74c3c;
      }

      /* WEBKIT BROWSERS - CHROME, OPERA AND SAFARI */
      .custom-progress::-webkit-progress-bar {
          background-color: #777;
          border-radius: 20px;
      }

      .custom-progress::-webkit-progress-value {
          background-image:
              -webkit-linear-gradient(45deg, transparent 40%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .1) 70%, transparent 70%),
              -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
              -webkit-linear-gradient(left, #f1c40f, #e74c3c);
          border-radius: 20px;
      }

      /* MOZILLA FIREFOX */
      .custom-progress::-moz-progress-bar {
          background-image:
              -moz-linear-gradient(45deg, transparent 33%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 70%, transparent 70%),
              -moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
              -moz-linear-gradient(left, #f1c40f, #e74c3c);
          border-radius: 20px;
      }

      /* MICROSOFT EDGE & IE */
      .custom-progress::-ms-fill {
          border-radius: 18px;
          background: repeating-linear-gradient(45deg,
          #f1c40f,
          #f1c40f 10px,
          #e74c3c 10px,
          #e74c3c 20px);
      }
  </style>
  <style>
      .wrapper {
          width: 70%;
          margin: 0 auto;
          text-align: center;
      }
  </style>
</head>

<body>
  <div class="wrapper">
      <h1>Animating HTML Progress Bar Using JavaScript</h1>
      <progress id="custom-bar" class="custom-progress" max="100" value="0">0%</progress>
  </div>

  <script>
      setInterval(function () {
          var progress = document.getElementById('custom-bar');

          if (progress.value < progress.max) {
              progress.value += 10;
          }

      }, 1000);
  </script>
</body>

</html>

HTML Progress Bar With Increment/Decrement Controls

You can keep playing around with JavaScript/jQuery to create a fun variation of HTML progress bar by adding manual increment/decrement trigger controls to increase or decrease the progress value. This would closely resemble a range slider. Each button click would increase or decrease the current value of the progress bar by 5.

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
    <style>
        body {
            background: #777;
        }

        h1 {
            color: #eee;
            font: 30px Helvetica, Arial, sans-serif;
            text-shadow: 0px 1px black;
            text-align: center;
            margin-bottom: 50px;
            -webkit-font-smoothing: antialiased;
        }

        p {
            text-align: center;
        }

        button {
            background: #FFF;
            width: 25px;
            margin: 0 10px;
            color: #555;
        }
progress {
            display: block;
            height: 25px;
            width: 500px;
            margin: 1rem auto;
            padding: 5px;
            border: 0 none;
            background: #444;
            border-radius: 10px;
        }

        progress::-moz-progress-bar {
            border-radius: 10px;
            background: #FFF;
        }

        progress::-webkit-progress-bar {
            background: transparent;
        }

        progress::-webkit-progress-value {
            border-radius: 10px;
            background: #FFF;
        }
    </style>
</head>

<body>
    <h1>HTML5 Progress Bar with Javascript Controls </h1>
    <progress max="100" value="20"></progress>
    <p>
        <button type="button" id="less">-</button> <button type="button" id="more">+</button>
    </p>

    <!------ JQuery 3.3.1 ------>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
        $('#more').on('click', function () {
            $('progress').val($('progress').val() + 5);
            return false;
        });
        $('#less').on('click', function () {
            $('progress').val($('progress').val() - 5);
            return false;
        });
    </script>
</body>

</html>

Fallbacks For Cross Browser Compatible HTML5 Progress Element In IE9 and Below

HTML5 Progress element is supported by all major browsers except IE9 and below. To add functionality to these browsers, one way is to code a fallback using div tags. However, this leads to additional code duplication and effort on the part of developers. An intuitive alternative is to use one of the most popular and widely used progress polyfills created by Lea Verou.

In order to ensure cross browser compatibility of HTML5 progress element for IE9 and 8 , Simply add progress-polyfill.js and progress-polyfill.css files to your project. Here is a sample code below run on IE8 using LambdaTest Real Time Testing.

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8" />
    <title>HTML5 &lt;progress&gt; polyfill by Lea Verou</title>
    <link href="http://lea.verou.me/polyfills/progress/progress-polyfill.css" rel="stylesheet" />
    <script>
        document.createElement('progress');
    </script>
</head>

<body>

    <h1>HTML5 &lt;progress&gt; polyfill</h1>

    <h2>Demos</h2>
    <ul>
        <li>
            <label>Indeterminate
                <progress max="100"></progress>
            </label>
        </li>
        <li>
            <label for="progress1">Progress: 0%</label>
            <progress max="10" value="0" id="progress1"></progress>
        </li>
        <li>
            <label for="progress2">Progress: .5 of 0</label>
            <progress max="0" value="0.5" id="progress2"></progress>
        </li>
        <li>
            <label for="progress3">Progress: 100%</label>
            <progress max="3254" value="3254" id="progress3"></progress>
        </li>
        <li>
            <label>Progress: 75%
                <progress max="0.8" value="0.6"></progress>
            </label>
        </li>
    </ul>

    <script src="http://lea.verou.me/polyfills/progress/progress-polyfill.js"></script>

</body>

</html>

HTML Progress Element Is Now Supported On IE9 & IE8 – LambdaTest Real Time Cross Browser Testing

Above mentioned is a screenshot for demonstrating HTML5 progress polyfill for IE9. I have made use of LambdaTest which is a cloud-based, cross browser testing tool offering more than 2000+ real browsers and browser versions running across different mobile and desktop devices. By performing cross browser testing on LambdaTest you can ensure your website or web-app renders seamless across different browsers. With in-built, developer tools for every browser you can easily debug and test your code for cross browser compatibility.

With that said, if you are curious to know more about additional resources visit Lea Verou’s website or the polyfill page.

CONCLUSION

For many developers, creating highly customizable and modern HTML progress bars without the use of any jQuery plugins or libraries just by using simple HTML and CSS would be a big revelation. Even though HTML5 progress element enjoys excellent browser support, still developers need to be mindful of colossal variations across browsers resulting from different rendering engines and ensure that consistency in styling is properly enforced. Keep exploring complex gradient patterns, creative CSS styling coupled with JavaScript scroll based animations which can help to push the limits of your HTML progress bars to the zenith.

Originally Published: LambdaTest

It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons

Complete Guide To Cross Browser Compatible CSS Gradients

nikhiltyagi04 — Thu, 02 May 2019 11:11:30 +0000

CSS gradients for background have become an indispensable aspect UI/UX design and have a massive impact on a website’s design. It plays a fundamental role in setting the design hierarchy, capturing user attention and focus, and finally defining website usability and appearance. The common forms of backgrounds that websites employ could either be solid colors, images, gradients or a combination of all three. CSS Gradients for background empowers designers for displaying smooth transitions between numerous colors. Not only are gradients being used for header or section backgrounds but also for creating CSS Gradients for overlays, text, buttons, borders, outlines, skewed blocks and banners.

Before the advent of CSS Gradients for background, developers had no other choice but to resort to images to create such effects. However, this method had huge drawbacks that would hurt websites performance. Using large number of images especially for trivial purpose would lead to a massive spike in website loading speed and bandwidth usage. But by harnessing the power of CSS Gradients designers can ensure faster site loading time without sacrificing resolution and clarity just by using simple native functions for CSS Gradients.

What Are CSS Gradients?

The CSS gradients are realised by the use of gradient functions which create a progressive transition between multiple colors. One important requisite for using CSS gradients is that they belong to data type and can only be applied to background-image property or shorthand “background” instead of CSS properties with data type such as “color” or “background-color”. CSS Gradients in background have no defined intrinsic dimensions and are devoid of any specific dimension size or ratio. It simply adopts to the dimension of the element it is applied to on the fly.

CSS3 defines 4 major types of gradients.

Linear CSS Gradient
Radial CSS Gradient (also elliptical)
Conical CSS Gradient
Repeating CSS Gradient

Except Conical gradient, the other 3 types of CSS gradients i.e. Radial, Repeating, and Linear CSS Gradients enjoys good browser support with the only exception being IE 6-9 and Opera mini browser. Conical gradients is still in an experimental stage and not yet adopted by the majority of browsers including Firefox, Edge and Opera. Only the latest version of Chrome (69+) and Safari(12.1+) provide support for this feature. We will discuss browser support for these 4 types of CSS gradients in detail, we will also perform cross browser testing for figuring cross browser compatibility solutions of these CSS gradients.

1. CSS Linear Gradient

CSS Linear Gradients facilitates smooth, escalating transition between numerous colors along a straight line. You can make these transitions to move in – up, down, left, right or diagonal direction. You need to specify a minimum of 2 colors (called color-stops) to create this effect along optionally specifying the direction and start points.

Syntax For Linear CSS Gradients

background-image: linear-gradient(direction, colorStop1, colorStop2, …);

Direction : Used to set the direction or angle of the CSS linear gradient effect. Direction can either be – top, bottom, left, right or in deg or in turn. It is optional to specify direction. Note that If direction is not specified, by default it will be set to top to bottom.
Color-Stops : Consists of color value followed by a start point. Start point can be in % or a length value. It is optional to define start points.

Some examples of CSS linear gradient with different set of values.

Top To bottom Linear CSS Gradients

The transition in this case starts from top to bottom direction with blue color on top and ends with purple color on bottom. Specify “to bottom” direction or it will be set by default . To create a reverse bottom to top gradient, reverse the direction to “to top”

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to bottom, #3498db, #9b59b6); /*top to bottom Gradient*/
        }
        #grad2 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to top, #f1c40f, #e74c3c); /*bottom to top Gradient*/
        }
    </style>

Left To Right Linear CSS Gradients

The transition in this case starts in left to right direction with green color on left and ends with blue color on right. Specify “to right” direction or to create a reverse bottom to top gradient, reverse the direction to “to left”.

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to right, #2ecc71, #2980b9); /*Left to Right Gradient*/
        }
        #grad2 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to left, #f1c40f, #c0392b); /*Right to Left Gradient*/
        }
    </style>

Diagonal Linear CSS Gradients

The transition in this case starts from top left to bottom right direction with green color at the top left and ends with blue color at bottom right. Specify “to bottom right” direction for this case or specify “to left bottom” to create a reverse scenario using diagonal CSS linear gradient.

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to right bottom, #2ecc71, #2980b9); /*Top left to Right Bottom*/
        }
        #grad2 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to left bottom, #f1c40f, #c0392b); /*Top Right to Left Bottom*/
        }
    </style>

Angled Linear CSS Gradients

To create an angled CSS linear gradient, define the direction not by using to top, bottom left, right parameters. Instead specify the direction using deg – any value between 0 and 360deg.

45deg will create a diagonal CSS linear gradient.
0deg will create a top to bottom CSS linear gradient.
90deg will create a left to right CSS linear gradient.

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(45deg, #2ecc71, #2980b9); /*45deg*/
        }
        #grad2 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(90deg, #f1c40f, #c0392b); /*90deg*/
        }
        #grad3 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(0deg, #8e44ad, #3498db); /*0deg*/
        }
    </style>

Multiple Color

There is no limit to the number of colors that you can specify to create the gradient effect. Below example will help you create CSS gradients with 3 and 4 colors.

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(45deg, #2ecc71, #2980b9, #8e44ad); /*45deg*/
        }
        #grad2 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to left, #f1c40f, #2ecc71, #e74c3c); /*90deg*/
        }
        #grad3 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to bottom, #1abc9c, #f1c40f, #3498db, #e74c3c); /*0deg*/
        }
    </style>

Color Stops

If color stops or starting points are not specified, the entire space of the element on which linear CSS gradients are being applied is divided equally among all the listed colors specified inside the gradient function. However, CSS allows you to change this behaviour and control how much space any color occupies by specifying its starting point either in % or in length units. In the example below we will set the starting point of yellow color (#f1c040f) to 20%. By default it would have been 0% for the first color – #e74c3c and 100% for the second color #f1c40f.

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to right,#e74c3c,#f1c40f 10%);
        }
    </style>

Color Stop Solid transition

Instead of progressive fading effect, we can also create solid transition between two or more colors specified in the linear CSS gradients function by using starting points trick. Set the start points of both colors to the same value to achieve this effect. Refer to the example below –

<style>
        #grad1 {
            width: 25%;
            height: 100px;
            background-image: linear-gradient(to right,#1abc9c 20%,#3498db 20%);
        }
    </style>

Cross Browser Compatibility Solution For CSS Linear Gradient

All desktop browsers including Internet Explorer 11 and Microsoft Edge provide browser support for Linear CSS Gradients, meaning these CSS Gradients offer excellent cross browser compatibility. The only exception that developers need to watch out for is IE6-9 and Opera Mini for which they need to perform cross browser testing.

CanIUse Cross browser compatibility tabe for CSS Linear Gradient

As you can see in theCanIUse table above, older versions of Mozilla Firefox, Opera, Safari and Google Chrome provided partial support (browsers version marked with yellow green color). You need to use dedicated vendor prefixes for each of those legacy/older versions to make CSS linear gradients cross browser compatible. Also, we will explore the Microsoft Filer property to add gradient functionality to Microsoft Internet Explorer i.e. IE 6-9 to offer cross browser compatibility.

Syntax For Cross Browser Compatible Linear CSS Gradients

Modern versions of all major browsers support the W3C standards for linear CSS gradients, making it a highly preferable choice due to its cross browser compatibility.

For Google Chrome 25+, Mozilla Firefox 16+, Opera 15+, Safari 6.1+, IE 10+, iOS 7+, Android 4.4+

background-image: linear-gradient(45deg, red 0%, blue 100%);

In order to add support for older versions of Google Chrome, Mozilla Firefox, Safari, Opera and IE we will use specific vendor prefixes mentioned below and create a cross browser compatibility solution.

For Google Chrome(v 4-9) and Safari (v 4-5)

background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, red), color-stop(100%, blue));

For Chrome (v 10-25) and Safari(v 5.1-6)

background-image: -webkit-linear-gradient(45deg, red 0%, blue 100%);

For Firefox(v 3.6-15)

background-image: -moz-linear-gradient(45deg, red 0%, blue 100%);

For Opera(v 11.5)

background-image: -o-linear-gradient(45deg, red 0%, blue 100%);

For IE 10+

background-image: -ms-linear-gradient(45deg, red 0%, blue 100%);

For IE6-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0000ff',GradientType=1 );

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ff0000, endColorstr=#0000ff)";

NOTE: IE6-9 only support two color gradients in left to right direction.

Solid color or JPG/SVG fallback

background-color: red;  or background-image: url(fallback.jpg);

Although, it is not prudent to worry about coding prefixes to support legacy browser versions like Chrome 10-25 or Safari 6. However, all modern browsers (except Edge) are backward compatible and understand the prefixed syntax. Moreover, many developers use tools like – Autoprefixer or other extensions in popular Code editors to take care of vendor prefixes. It is important for any developer to understand the prefixed syntax that autoprefixer is adding to their code.

Angled CSS Linear Gradients

There is one more complication that you need to address before moving ahead with writing cross browser compatible code for linear CSS gradients. The complication lies with the “Angled CSS Linear Gradients”. Old prefixed syntax supported by older browser versions and the new unprefixed syntax supported by modern browsers comprehend “Angled CSS Linear Gradients” in a different manner to each other.

Unprefixed new syntax : supported by – Chrome 25+, Firefox 16+, Opera 15+, Safari 6.1+, IE 10+. It defines 0 deg in bottom-to-top direction and proceeds in clockwise direction. 0deg is top to bottom and 90deg is left-to-right
Prefixed old syntax : supported by – Chrome 10-25, Firefox 3.6-15, Opera 11.1-11.5, Safari 5.1-6. It defines 0 deg in left to right direction and proceeds in anti-clockwise direction, ie – 0 deg is left to right and 90deg is bottom to top.
Legacy syntax : supported by – Chrome 1-9, Safari 4-5. Does not support angles. Impractical to be concerned with today.

Here is a simple conversion formula you can use to get the same gradient effect in both the syntax-

New angle(unprefixed new syntax) : 90 – Old angle (prefixed old syntax)

Old angle (prefixed old syntax) : 90 – New angle(unprefixed new syntax)

For example –

If new angle is 0 deg then old angle = 90-0 = 90deg

background: -webkit-linear-gradient(90deg, red, yellow, green);
background: linear-gradient(0deg, red, yellow, green);

If new angle is 45deg, then old angle = 90-45 = 45deg

background: -webkit-linear-gradient(45deg, red, yellow, green);
background: linear-gradient(45deg, red, yellow, green);

If new angle is 90 deg then old angle = 90-90 = 0deg

background: -webkit-linear-gradient(0deg, red, yellow, green);
background: linear-gradient(90deg, red, yellow, green);

if new angle is 135deg, then old angle = 90-135 = -45deg

background: -webkit-linear-gradient(-45deg, red, yellow, green);
background: linear-gradient(135deg, red, yellow, green);

Now, after we have solved the complication with Gradient angle, we can compile together all the vendor prefixes and fallbacks to arrive at the final cross browser compatible solution for CSS linear Gradients.

<!DOCTYPE html>
<html>
<head>
   <style>
       #grad1 {
           width: 25%;
           height: 100px;
           /* Solid color or jpg fallback */
           background-color: red; /*background-image: url(fallback.jpg);*/
           /* For Google Chrome(v 4-9) and Safari (v 4-5) */
           background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, red), color-stop(100%, blue));
           /* For Chrome (v 10-25) and Safari(v 5.1-6)  */
           background-image: -webkit-linear-gradient(45deg, red 0%, blue 100%);
           /* For Firefox(v 3.6-15)  */
           background-image: -moz-linear-gradient(45deg, red 0%, blue 100%);
           /* For Opera(v 11.5) */
           background-image: -o-linear-gradient(45deg, red 0%, blue 100%);
           /* For IE 10+ */
           background-image: -ms-linear-gradient(45deg, red 0%, blue 100%);
           /* For IE6-9 */
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=1);
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ff0000, endColorstr=#0000ff)";
           /* For Modern browsers */
           background-image: linear-gradient(45deg, red 0%, blue 100%);
       }
   </style>
</head>

<body>
   <h1>Linear Gradient</h1>
   <h3>Cross Browser Compatible Solution For All Browsers And Versions</h3>
   <div id="grad1"></div>
</body>
</html>

If you are interested to see how our code appears across different browsers and versions that we discussed above, use a cross browser testing tool such as LambdaTest to validate cross browser compatibility testing across 2000+ real browsers and browser versions.

2. CSS Radial Gradient

CSS radial-gradient() function is used to create a smooth progressive transition between 2 or more colors radiating from a singular point of origin called center rather than a straight line in case of CSS linear gradients. The resulting gradient shape is in the form of a circle or an ellipse. A radial CSS gradient starts from a singular point of origin called center and radiates outwards to form concentric shapes which could be circles or ellipses. The color mentioned first is at the center position and proceeds to fade outwards into other colors towards the edge of element.

A radial CSS gradient can be represented with shape, size, position along with multiple color-stop points. Series of concentric colors bands or shapes are placed along an axis called virtual gradient ray that traverses from center to the ending shape in the rightward direction.

Syntax For Radial CSS Gradients

background-image: radial-gradient( , color-stop stop%, ..., color-stop stop%);

Shape : Specifies the shape of the radial CSS gradients. CSS Gradient Shape value can either be an ellipse or a circle. By default the shape is set to ellipse.
Size : Defines the size of the radial CSS gradients with respect to the element shape. Size value can be of 4 types – Farthest Corner, Farthest Side, Closest Corner or Closest Side. By default value is set to farthest corner.
Position : Relays the position of the radial CSS gradients. Values can be top left right bottom or center or combination of 2 values. Value of position can also be in %. By default it is set to “at center center” or “at 50% 50%”.
Color-stops : Defines a color value followed by a stop value in % between 0-100%. Mentioning stop value is optional. 0% implies the center of the shape, it could be either circle or ellipse, while a 100% represents an intersection point of virtual gradient ray along with the ending shape.

Image Credits: Radial CSS Gradients source

Now, we take a look at some examples of Radial CSS Gradients with different set of values.

Basic Example Of Radial CSS Gradients With Evenly Spaced Color-stops

By default, the shape is set to ellipse, position is at center, and size set to farthest corner. When stop % is not mentioned, by default all 3 colors are evenly spread.

<style>
      #radial-grad {
           height: 300px;
           width: 25%;
           background-image: radial-gradient(#f1c40f, #2ecc71, #e74c3c);
       }
</style>

Radial CSS Gradients With Differently Spaced Color Stops

The three colors can be specified with stop values in %. Now, if we wish to set the color green to 0%, color yellow at 20% and color Red at 70%.

<style>
       #radial-grad {
           height: 300px;
           width: 25%;
           background-image: radial-gradient(#2ecc71 0%, #f1c40f 20%, #3498db 70%);
       }
   </style>

Radial CSS Gradients With Circle Shape:

By default, the gradient shape is set to elliptical. Set the value to circle if you want a circle shaped radial CSS gradients.

<style>
          #radial-grad {
           height: 300px;
           width: 25%;
           background-image: radial-gradient(circle, #f1c40f 0%, #2ecc71 30%, #9b59b6 60%);
       }
      </style>

Radial CSS Gradients With Different Size Values

Size value of Radial CSS Gradients specifies the size of the ending shape. It can be one of the following 4 values –

Farthest-corner : Gradient is sized in such a manner that it meets the farthest corner from the gradient center.
Closest-corner : Gradient is sized in such a manner that it meets the closest corner from the gradient center.
Farthest-side : Default value. The gradient ends at the side which is farthest from the point of origin or center of the gradient.
Closest-side : Exact opposite of farthest-side. The gradient ends at the side which is closest from the point of origin or center of the gradient.

<style>
       #radial-grad1 {
           background-image: radial-gradient(circle farthest-side at 70% 40%, green, yellow , orangered );
       }
       #radial-grad2 {
           background-image: radial-gradient(circle closest-side at 70% 40%, green, yellow , orangered );
       }
       #radial-grad3 {
           background-image: radial-gradient(circle farthest-corner at 70% 40%, green, yellow , orangered );
       }
       #radial-grad4 {
           background-image: radial-gradient(circle closest-corner at 70% 40%, green, yellow , orangered );
       }
   </style

Radial CSS Gradients With Different Position Values

The position value for radial CSS gradients could be specified either by using top, right, bottom, center(or combinations of these) or in %. By default the position is set to “at center center” or “at 50% 50%”. First value represents x-axis position while second value represents y-axis position.

<style>
       #radial-grad1 {
           background-image: radial-gradient(circle farthest-side at 50% 50%, #f1c40f 0%, #2ecc71 70%, #9b59b6 100%);
       }

       #radial-grad2 {
           background-image: radial-gradient(circle farthest-side at 0% 50%, #f1c40f 0%, #2ecc71 70%, #9b59b6 100%);
       }

       #radial-grad3 {
           background-image: radial-gradient(circle farthest-side at center right, #f1c40f 0%, #2ecc71 70%, #9b59b6 100%);
       }

       #radial-grad4 {
           background-image: radial-gradient(circle farthest-side at bottom right, #f1c40f 0%, #2ecc71 70%, #9b59b6 100%);
       }

   </style>

Radial CSS Gradients With Sharp Color Stops

Instead of gradual progressive blending of 2 colors, you can alter color stop values in such a way that you can obtain sharp direct transition between 2 colors to obtain sharp color bands.

#radial-grad {
           height: 300px;
           width: 25%;
           background-image: radial-gradient(circle, #f1c40f 0%, #f1c40f 30%, #1abc9c 30%, #1abc9c 60%, #e74c3c 60%, #e74c3c 100%);
       }

Cross Browser Compatibility Solution For Radial CSS Gradients

Radial CSS Gradients enjoy the same browser support as CSS Linear Gradients that we discussed above, offering great cross browser compatibility. All modern browsers like Google Chrome, Mozilla Firefox, Opera, Safari and Edge support radial CSS gradients. The only exception is in Internet explorer IE 6-9. Just like in the case of CSS linear gradients, we can use vendor prefixes and fallbacks to provide support for older browser versions, and then perform manual/ automated cross browser testing to see if our fixes are actually working or not.

CanIUse Cross browser compatibility tabe for Radial CSS Gradient

Cross Browser Compatible Syntax For Radial CSS Gradients

Modern versions of all major browsers support the W3C standards for Radial CSS Gradient.

For Chrome 25+, Firefox 16+, Opera 15+, Safari 6.1+, IE 10+, iOS 7+, Android 4.4+

background-image: radial-gradient(circle at center, #f1c40f 0%, #1abc9c 100%);

NOTE: modern new unprefixed syntax requires you to use “at” when specifying the position. It is not required in older prefixed syntax shown below.

In order to add support for older versions of chrome, firefox, safari and opera we will use specific vendor prefixes mentioned below and create a cross browser compatible solution. Use JPG fallback or a polyfill to make radial CSS gradients work in IE 6-9.

For Google Chrome(v 4-9) and Safari (v 4-5)

background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f1c40f), color-stop(100%,#1abc9c));

For Google Chrome (v 10-25) and Safari(v 5.1-6)

 background-image: -webkit-radial-gradient(center, circle, #f1c40f 0%, #1abc9c 100%);

For Mozilla Firefox (v 3.6-15)

background-image: -moz-radial-gradient(center, circle cover, #f1c40f 0%, #1abc9c 100%);

For Opera(v 11.5)

background-image: -o-radial-gradient(center, circle, #f1c40f 0%, #1abc9c 100%);

Solid color or JPG/SVG fallback

background-color: red;  or background-image: url(fallback.jpg);

IE filter property can only be used to create 2 color linear gradients and not radial CSS gradients. hence it is difficult to replicate radial CSS gradients for IE6-9. Either use a linear gradient or JPG/SVG fallback

3. CSS Conical Gradients

CSS conical gradient function can be used to create a circular gradient pattern similar to radial CSS gradients. However, while radial CSS gradients creates a pattern in which color stops radiates outwards from the center but in the case of conical CSS gradients, color stops are placed around the center point of origin. It is dubbed as “conic” because of its cone like appearance if viewed from above.

The positions of different color-stops in a conical CSS gradients are defined either in terms of deg or percentages. 0% corresponds with 0deg while 100% corresponds to 360deg. The degree or % position value increases as you converse in clockwise direction. Although a value greater than 360deg or 100% is permitted, it will not be clearly visible on the conical CSS gradients canvas but might still alter the color stop distribution.

Syntax For Conical CSS Gradients

background-image: conic-gradient( , colorStop1 angle, colorStop2 angle, …);

Starting Angle : From angle can be specified in terms of either deg or %> By default set to 0deg or 0%
Position : position can be specified in terms of center, top, left, right, bottom or in terms of %. By default conical CSS gradients position is set to center or 50%.
color-stop : Each color stop can be specified with starting and ending anle.By default angle of first color stop and last color stop is set to 0deg and 360deg.

Now, we look at some examples of conical CSS gradients.

Basic Conical CSS Gradients Pattern

A conical CSS gradient with starting angle of 0deg, at center position and three color stops

<style>
       #conic-grad {
           width: 25%;
           height: 300px;
          background: conic-gradient(#1abc9c 0deg, #f1c40f, #e74c3c 360deg);
       }
   </style>

2. Creating A Pie Chart With CSS Conical Gradients

You can use CSS Conical gradient to create a Pie chart by defining color stops with sharp transitions. As i stated before, each color stop specified in the conical gradient function can be complemented with a starting and ending angle. To obtain a sharp or instantaneous instead of gradual progressive transition value of starting angle of a color stop is less than or equal to ending angle of the previous color stop. So either set starting angle of each color stop to 0% or set ending angle of 1st color stop equal to starting angle of 2nd color stop and so on. Finally, set the border radius of the element to 50% to obtain a circular div.

<style>
       #conic-grad {
           width: 25%;
           height: 300px;
           background: conic-gradient(#1abc9c 0% 33%, #f1c40f 0% 66%, #e74c3c 0% 100%);
           /*background: conic-gradient(#1abc9c 0% 33%, #f1c40f 33% 66%, #e74c3c 66% 100%);*/
           border-radius: 50%;
       }
   </style>

Creating A Donut Chart With CSS Conical Gradients

In order to create a donut chart using conical CSS Gradients, you can make use of both radial and conical gradient. Use sharp solid transition between 2 color stops – white and transparent in the radial gradient. Transparent color stop will coincide with the visible conical CSS gradient, giving the appearance of a donut chart. You can also create a pseudo element using :after or :before to create the white circular element at the center of conical CSS gradient.

<style>
       #conic-grad {
           width: 25%;
           height: 300px;
           background: radial-gradient(white 40%, transparent 41%), conic-gradient(#1abc9c 0% 33%, #f1c40f 0% 66%, #e74c3c 0% 100%);
           border-radius: 50%;
       }
   </style>

Cross Browser Compatibility Solution For CSS Conical Gradients

CSS conical gradient is still in experimental stage and hasn’t been adopted yet by the majority of modern browsers. Only Google Chrome 69+ and Safari 12.1+ in desktop browsers and iOS safari 12.2, Android 12.2+ and Chrome Android 67 among mobile browsers provide browser support for this feature. Other popular browsers like Mozilla Firefox, Opera and Edge still haven’t rolled out support for conical CSS gradient.

CanIUse Cross browser compatibility table for CSS Conical Gradient

In order to provide CSS conical gradient functionality for unsupported browsers, you can make use of an ingenious polyfill by Lea Verou.

4. CSS Repeating Gradients

CSS Repeating gradient function helps to generate a repeating linear, radial, or conical gradient image. Color stops are repeated either along a line or around a point of origin indefinitely until it encompasses the entire element canvas. CSS repeating gradient function is of three types : repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient().

repeating-linear-gradient() :

CSS repeating-linear-gradient function is used with the exact same syntax as CSS linear-gradient function, also, it accepts the same arguments. The difference between the two lies in the fact that in case of linear-gradient, color stops are spread across the gradient axis gradually, and occupy the entire element without repetition. On the other hand, in the case of repeating-linear-gradient, colors stops are repeated in a linear manner along the specified direction. Each color stop is separated from each other by a distance equal to the difference between last color stop and the first color stop.

Syntax For Repeating Linear Gradient :

background-image: repeating-linear-gradient(45deg, red 10px, blue 60px);

The two colors are shifted by the difference between the last color-stop and the first one which is 60-10px = 50px. This is equivalent tolinear-gradient(45deg , ..., red -40px, blue 10px, red 10px, blue 60px, red 60px, blue 110px, ...);

In order to create color stripes with sharp transition, ending color stop of first color should be equal to starting color stop of next color. Consider this example –

<style>
    #repeating-linear-grad1 {
           width: 25%;
           height: 300px;
           background-image:
           repeating-linear-gradient(45deg, yellow 10px, yellow 20px, #009966 20px, #009966 30px, purple 30px, purple 40px);
    }
   </style>

repeating-radial-gradient() :

CSS repeating-radial-gradient function has the exact same syntax as CSS radial-gradient function and accepts the same arguments. The difference between the two lies in the fact that in case of radial-gradient, color stops are spread across the gradient virtual ray gradually in an elliptical or circular manner occupying the entire element without repetition. On the other hand, in the case of repeating-linear-gradient, color stops are spread in a circular manner to form repeating bands that cover the entire element. Each color stop is separated by a distance which is equal to the difference between last color stop and the first color stop. End of each color stop coincides with starting of next color stop.

Syntax :

background-image : repeating-radial-gradient(circle at center, red 10px, blue 60px);

The two colors red and blue are shifted by the difference between the last color-stop and the first one which is 60-10px = 50px. This is equivalent to- radial-gradient ( circle at center , ..., red -40px, blue 10px, red 10px, blue 60px, red 60px, blue 110px, ...);

In order to create color stripes with sharp transition, ending color stop of first color should be equal to starting color stop of next color. Consider this example –

<style>
   #repeating-radial-grad {
           width: 25%;
           height: 300px;
           background-image:
           repeating-radial-gradient(circle at center center, yellow 10px, yellow 20px, #009966 20px, #009966 30px, purple 30px, purple 40px);
       }
   </style>

repeating-conic-gradient() :

CSS repeating-conic-gradient works in a similar fashion to conic-gradient in terms of syntax and arguments but keeps repeating the color stops indefinitely until entire 360% or 100% of the element canvas is covered.

Syntax:

background: repeating-conic-gradient(#f1c40f 0% 5%, #e74c3c 5% 10%);

Set the starting angle in % or deg of color stop equal to ending angle of previous color stop. in our example, the ending angle of #f1c40f color stop is set to 5% which is equal to the starting angle of #e74c3c color stop.

You can also create a checkerboard pattern easily by adding a single line of CSS code. Set the “background-size” to “100% 100%”. Also alter the color stops by changing the angle of first color stop to 0% 25% and angles of second ccolor stop to 25% and 50%.

<style>
       #repeating-conic-grad {
           width: 300px;
           height: 300px;
           background: repeating-conic-gradient(#ecf0f1 0% 25%, #34495e 25% 50%);
           background-size: 100px 100px;
       }
   </style>

What You Learnt!

Now, you are capable of creating any kind of gradients patterns by simply utilizing Native CSS gradients and cross browser compatibility tricks without relying on images and SVGs. Go ahead and try to apply CSS gradients to create a wide array of different UI elements like images with gradient overlays, gradient buttons, border outlines, shadows, skewed gradient masks etc. Keep in mind the importance of browser compatibility and devise a sound cross browser testing strategy. There is no point in presenting an outstanding web-page with CSS gradients which renders horribly on different browsers. Cheers!

Related Posts

Fixing Browser Compatibility Issues With CSS Opacity & RGBA

nikhiltyagi04 — Tue, 02 Apr 2019 08:33:53 +0000

Very often web designers encounter the need to spice of their websites by playing with CSS opacity for backgrounds, texts and images to build modern subdued styling effects. Opacity is also extensively utilised in creating a subtle shadow effect on text and boxes to make a webpage more attractive for users. This can be achieved either by using the CSS opacity property or by using RGBA colour, each way has its own merit and shortcomings. We will explore some of their most popular practical uses and cross browser compatibility solution to make them work on legacy browsers like IE8 and below versions that offer either partial or no browser support altogether.

CSS Opacity Property

The CSS opacity property is used to set the opacity value for an element. It defines the level of transparency by the use of a number in the range 0 to 1, where 1 corresponds to 100% opaque (or 0% transparent) and 0 corresponds to 0% opaque (or 100% transparent). However, CSS opacity property will add the specified transparency level to the entire element including all its child elements as well. For eg- if opacity property is defined for a div element, then all the elements inside the div which could be some text, image or other divs will also gain the same opacity from the parent div even though opacity isn’t explicitly inherited.

Before we deep dive in this article, you may have a look at the sample code I used to represent CSS Opacity for background on one of our LambdaTest Experiments, here you can visualize the output with respect to the difference in CSS opacity value.

Syntax For Using CSS Opacity

opacity: number|initial|inherit;

Number : specifies the alpha channel value- the opacity/transparency level. Ranges from 0(zero opacity) to 1(full opacity)
Initial : Sets to default value which is 1 – full opacity
Inherit : inherit value from parent element

Sample Code To Represent Cross Browser Compatibility Issue In CSS Opacity For Background Color

 <!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            text-align: center;
        }
        div {
            width: 50%;
            margin: 0 auto;
            background-color: #f1c40f;
            padding: 10px;
        }
        .opacity25 {
            opacity: 0.25;
        }
        .opacity50 {
            opacity: 0.5;
        }
        .opacity75 {
            opacity: 0.75;
        }
    </style>
</head>
<body>
    <h1>CSS OPACITY PROPERTY</h1>
    <div class="opacity25">
        <p>opacity 25%</p>
    </div>
    <div class="opacity50">
        <p>opacity 50%</p>
    </div>
    <div class="opacity75">
        <p>opacity 75%</p>
    </div>
    <div>
        <p>opacity 100%</p>
    </div>
</body>
</html>

CSS Opacity for Background Color

Note: If CSS opacity number is set to a value that is outside the defined range 0 to 1, it is still a valid syntax. The value is rounded to the nearest limit point. For instance, if CSS opacity is set to -0.5 it will be rounded to 0. Similarly, if CSS opacity is set to 1.25, it will be rounded to 1.

<style>
.opacity-25{
 opacity: -0.25;
 }
.opacity125{
 opacity: 1.25;
 }
</style>

Rounding value of CSS Opacity for Background Color

Browser Support For CSS Opacity Property

CanIUse browser compatibility & Support Table of CSS Opacity for Background Color

CSS3 provides a short single line style rule to add CSS opacity for background color, which is supported by all modern browsers. However, earlier due to cross browser compatibility and feature support issues, making CSS opacity work was quite cumbersome, and required extensive browser specific rules and fallbacks shown below.

CSS Opacity Background Color is not supported by IE8 and below- LambdaTest Real Time Testing

To access my webpage on legacy browsers I have performed browser compatibility testing using LambdaTest to ensure that my code renders as intended. LambdaTest is a cross browser testing tool offering more than 2000 real browsers and browser versions running on numerous operating systems. For this experiment of CSS opacity for background color, I used live-interactive feature of LambdaTest called Real Time Testing. Real time testing helps you to interact with your webapp across thousands of browser and browser versions by running a virtual machine, hosted on LambdaTest cloud servers.

I also made use of Lambda Tunnel, which allowed me to test my locally hosted webpages on LambdaTest platform by establishing an SSH(Secure Shell) connection.

Cross Browser Compatible Solution For CSS Opacity

If you look at the code below, you will get an idea on how cross browser compatibility for CSS Opacity was utilized in earlier days.

div{
/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

 /* IE 5, IE6 and IE7 */ 
filter: alpha(opacity=50); 

/* Netscape */ 
-moz-opacity: 0.5;

 /* Safari 1.x Pre webkit */ 
-khtml-opacity: 0.5; 

/* Modern browsers */
opacity: 0.5; 
}

But it is quite evident that this is not a practical solution for modern use. Today, there is a short modern hack for making CSS opacity work for all browsers including legacy versions of Internet Explorer – IE6-IE8.

div {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 and lower */
  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}

CSS Opacity property is now supported by IE8, IE7 and IE6 – LambdaTest Realtime testing

The code mentioned above will not work in IE, specially in IE8 if ‘zoom :1’ is not specified. IE doesn’t apply several CSS style rules to elements that don’t have layout. ‘zoom:1’ or ‘width :100%’ will trigger – “has layout” for the element and enable CSS opacity for background color or images to be applied.

Opacity Polyfill For Internet Explorer (IE6 – IE8)

The final solution in our quiver for fixing cross browser compatibility issue with CSS opacity for background and images, is a small polyfill which adds support to older IE versions IE6, IE7 and IE8. Using this polyfill eliminates need to worry about vendor prefixes or fallbacks as far as IE legacy browsers are concerned. However, note that this polyfill will not work for inline CSS style rules.

USAGE –

Use IE conditional statement to load polyfill JS file in Internet Explorer IE8, IE7 and IE6.

 <!--[if lte IE 8]> <script src="jquery.ie-opacity-polyfill.js"></script>  <![endif]-->

This will not be interpreted by any modern browsers and will be simply discarded as a comment. If you want to learn more about IE conditional statements and CSS feature queries, check out my article here.

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Opacity Polyfill for IE</title>
    <!--[if lte IE 8]><script src="jquery.ie-opacity-polyfill.js"></script><![endif]-->
    <style type="text/css">
        .square {
            float: left;
            width: 90px;
            height: 90px;
            padding: 5px;
            margin: 25px;
            background: #000;
            color: #fff;
        }
        .opacity75 {
            opacity: .75;
        }
        .opacity50 {
            opacity: .5;
        }
        .opacity25 {
            opacity: .25;
        }
    </style>
</head>
<body>
    <div class="square">Opacity: 100%</div>
    <div class="square opacity75">Opacity: 75%</div>
    <div class="square opacity50">Opacity: 50%</div>
    <div class="square opacity25">Opacity: 25%</div>
</body>
</html>

CSS offers another alternative to CSS opacity to achieve a similar kind of opacity or transparency effect by the use of RGBA color. This is quite popular for creating overlay backgrounds, gradient backgrounds, text and box shadow, gradient text etc.

RGBA Color

One fundamental problem with CSS Opacity property is that if specified for a parent element, it affects all children element as well. If you set background of a div element to transparent, then all children elements (like text and images) of the parent div will also be set to transparent. This is where RGBA color comes to our rescue. The RGBA color value is similar to RGB but with an alpha channel which specifies opacity or conversely transparency value for an element but leaves its children untouched.

Syntax Of Using RGBA For Opacity

rgba(R,B,G,alpha-channel)

R/B/G: Specifies the value or intensity of Red, Blue and green colors respectively either by an integer value ranging from 0 to 255 or % value ranging from 0-100%.
Alpha-channel : species the opacity value as a range between 0 and 1. 0 represents 0% opacity(or 100% transparency) and 1 represents 100% opacity(or 0% transparency).

Sample Code To Represent Cross Browser Compatibility Issue In RGBA Opacity For Background Color

You can refer to our LambdaTest Experiment on RGBA Opacity background color property. Below is the code sample used for the cross browser compatibility experiment on RGBA Opacity.

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            text-align: center;
        }
        div {
            width: 50%;
            margin: 0 auto;
            padding: 10px;
        }
        .opacity0{
            background: rgba(46, 204, 113,0);
        }
        .opacity25{
            background: rgba(46, 204, 113,0.25);
        }
        .opacity50{
            background: rgba(46, 204, 113,0.5);
        }
        .opacity75{
            background: rgba(46, 204, 113,0.75);
        }
        .opacity100{
            background: rgba(46, 204, 113,1.0);
        }

    </style>
</head>
<body>
    <h1>RGBA COLOR</h1>
    <div class="opacity0">
        <p>opacity 0%</p>
    </div>
    <div class="opacity25">
        <p>opacity 25%</p>
    </div>
    <div class="opacity50">
        <p>opacity 50%</p>
    </div>
    <div class="opacity75">
        <p>opacity 75%</p>
    </div>
    <div class="opacity100">
        <p>opacity 75%</p>
    </div>
</body>
</html>

Browser Support Of RGBA Color Type

CanIUse browser compatibility and support table for RGBA color

Although RGBA color enjoys excellent support across all major browsers and is largely cross browser compatible. However noticeable exceptions are IE6 – IE8 which do not support this feature. One solution is to use a fallback solid color(100% opacity) without any alpha value, ie without any opacity/transparency value. Browsers which do not comprehend RGBA value will render the fallback color. However we will explore ways to make RGBA cross browser compatible and work in IE6-IE8 versions as well.

RGBA color is not supported by IE8 and below- Lambdatest Realtime testing

Cross Browser Compatible Solution Of Using RGBA For Opacity

Microsoft Internet explorer (IE6-IE8) had its own own gradient and filter properties which is slightly different to RGBA. It rather uses 8-character HEX value called ‘ARGB’ (alpha RGB) to define colors with a transparency value. Unlike traditional RGBA which is 4 character long, R,G,B values ranges from 0-255 and alpha channel value ranging from 0-1, #ARGB has a hexadecimal format with first 2 – #AARRGGBB. First 2 characters specify the alpha value and control the opacity(00-FF) while last 6 characters specify the red, blue and green color intensity respectively.

Here’s a table showing alpha value in % and its corresponding alpha value in #ARGB format – If you have RGBA value – rgba(F,0,0,0.5), then the corresponding value in #ARGB format will be #80FF0000 where first 2 characters ‘80’ represent 0.5 or 50% opacity.

| 100% | FF|
| 95% | F2|
| 90% | E6 |
| 85% | D9 |
| 80% | CC |
| 75% | BF |
| 70% | B3 |
| 65% | A6 |
| 60% | 99 |
| 55% | 8C |
| 50% | 80 |
| 45% | 73%|
| 40% | 66 |
| 35% | 59 |
| 30% | 4D |
| 25% | 40 |
| 20% | 33 |
| 15% | 26 |
| 10% | 1A |
| 5% | 0D |
| 0% | 00 |

Add the following code snippets to your code to enable support for RGBA in IE6, IE7 and IE8

For IE6-IE7

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#6523BE38', EndColorStr='#6523BE38');

For IE8

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#6523BE38', EndColorStr='#6523BE38')";

‘hasLayout’ for IE

Add zoom:1; to trigger ‘hasLayout’

Now after combining all the fallbacks, our final code shapes up to be –

 <!DOCTYPE html>
<html>

<head>
   <style>
       h1 {
           text-align: center;
       }

       div {
           width: 50%;
           margin: 0 auto;
           padding: 10px;
       }

       .opacity25 {
           /* default fallback for unsupported browsers*/
           background: transparent;
           /*or some solid color background : red; */
           /* for modern browsers  */
           background: rgba(230, 126, 34,0.25);
           /* For IE8 */
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#40e67e22', EndColorStr='#40e67e22')";
           /* For IE6,IE7 */
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#40e67e22', EndColorStr='#40e67e22');
           /* Trigger hasLayout for IE */
           zoom: 1 !important;
       }
       .opacity50 {
           background: transparent;
           background: rgba(230, 126, 34,0.5);
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#80e67e22', EndColorStr='#80e67e22')";
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80e67e22', EndColorStr='#80e67e22');
           zoom: 1 !important;
       }
       .opacity75 {
           background: transparent;
           background: rgba(230, 126, 34,.75);
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#bfe67e22', EndColorStr='#bfe67e22')";
           filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#bfe67e22', EndColorStr='#bfe67e22');
           zoom: 1 !important;
       }
   </style>
</head>

<body>
   <h1>RGBA COLOR SUPPORT FOR IE</h1>
   <div class="opacity25">
       <p>opacity 25%</p>
   </div>
   <div class="opacity50">
       <p>opacity 50%</p>
   </div>
   <div class="opacity75">
       <p>opacity 75%</p>
   </div>
</body>

</html>

RGBA color is now supported by IE8, IE7 and IE6 – LambdaTest Realtime testing

Conclusion

CSS opacity and RGBA are one of the most widely used properties used extensively across websites for fading animations and transitions to build modern and attractive UI designs. Even though opacity property and RGBA color value enjoys excellent support across all major browsers and versions, there are still small compatibility issues when it comes to Internet Explorer 8 and below. But now you are armed with this flawless cross browser compatible solution for opacity to ensure that your designs work seamlessly across all browsers.

It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons

nikhiltyagi04 — Fri, 29 Mar 2019 11:17:37 +0000

In the world of modern web, icons have become an indelible and integral part of UI design. From navigation menus to social media icons, symbols and indicators, icons feature heavily on almost every single website and app on the internet and its popularity showing no signs of waning anytime soon. Consequently, every developer has to face this conundrum — Which icon set should they use?

Traditionally, developers had to rely on just images formats to quench their needs. However, using images for icons delivers scathingly poor performance in terms of render quality and resolution. But now developers have 2 choices at their disposal — Icon Fonts vs SVG Icons(Scalable Vector Graphics). This is a debate that shows no signs of abating is splitting the dev community into two. Proponents of both icon formats argue the merits of one over another. However, in recent times there has been a general consensus and momentum towards SVG icons format. SVG icons system ensures better performance, higher accessibility standards, high rendering quality, unmatched flexibility, and extensive customization. In this article, we will explore in brief the history of web icons, pros, and cons of font icons vs SVG icons.

You can choose icon fonts or SVG but you should make sure that your designs are responsive so if you are looking for a free next-gen browser to build, test & debug mobile websites you can try LT Browser a dev-friendly browser in which you can see the mobile view of your website on Android and iOS resolutions & check its responsiveness.

A Brief History Of Web Icons

Era Of Images

Before the discourse of icon fonts vs SVGs, when browsers had non-existent CSS support, images were the only way for developers to showcase icons using the classic

tag. Here is an example of an image icon –

    <a href=”contact-us.html”>

    <img src=”mail.jpg” alt=”email” />

    </a>

What Went Wrong?

But this technique was troubled with a plethora of shortcomings. The biggest drawback of using images to display web icons is the lack of scalability. Image formats like PNG and JPEG suffer from the dramatic loss in rendered quality when up or down scaled. Another major drawback was that if a webpage was using multiple images for icons, each of them would trigger a new HTTP request which seriously downgraded performance. Lastly, since images are not scalable, each image icon needed to have multiple resolution formats for different screen sizes. Also, if an image icon has a hover effect, then a new image for its hover state needs to be loaded separately using Javascript/jQuery. Although use of images for icons is still quite common, it represents a terrible practice which must be avoided at all costs.

Rise Of Image Sprites

Early 2000s started a new trend of image sprites. An image sprite is merely a collection of separate individual images put together to form a single image. Image sprite arranges all icons in a single GIF or PNG file and is loaded as a CSS background image. By adjusting the CSS background property, only the required icon is displayed. Sprites proved to be revolutionary for web fonts by solving the malice of generating multiple HTTP server requests triggered by individual images. This resulted in the conservation of bandwidth and increased website load speed. Moreover, a lot of accessibility issues are also solved as background images are invisible to text browsers and screen readers unlike images which are regarded as content.

Here we have a image sprite — “last-guardian-sprites_0.png” containing a number of character icons. Instead of using 24 separate images, we use this single sprite image to reduce number of server requests and bandwidth.

Using CSS, we can play with background position property to display only the icons we want hiding the rest from view. Note that img_trans.gif is a just small transparent image being used because “src” attribute cannot be left empty.

 <!DOCTYPE html>
    <html>
    <head>
    <style>
    #char1 {
     width: 75px;
     height: 75px;
     background: url([https://opengameart.org/sites/default/files/last-guardian-sprites_0.png](https://opengameart.org/sites/default/files/last-guardian-sprites_0.png)) 0 0;
    }

    #char2{  width: 75px;
     height: 75px;
     background: url([https://opengameart.org/sites/default/files/last-guardian-sprites_0.png](https://opengameart.org/sites/default/files/last-guardian-sprites_0.png)) -85px 0;
    }
    </style>
    </head>
    <body>

    <img id="char1" src="img_trans.gif" width="1" height="1"><br><br>
    <img id="char2" src="img_trans.gif" width="1" height="1">

    </body>
    </html>

By setting background position to 0, 0 and the width, height of the container set at 75px each, we are able to display the first character icon. Altering the value of background position to -85px 0, we can display the second icon from the image sprite. A useful free tool to generate image sprites that you can use is Toptal Sprite Generator.

Revolutionary Icon Fonts!

The next stage of evolution in web icons came in 2012 in form of icon fonts. Unlike images and sprites, icon fonts are able to scale up perfectly to any resolution without any degradation or loss of visual quality. Even though image sprites was a vast improvement, it still had tons of shortcoming. If you needed to change the color or resolution of an icon, that would mean needing an entirely new image altogether. On the other hand, icon fonts are in essence simple text. We can use CSS style rules to easily change and modify color, size/resolution, apply box-shadow, apply CSS animations and transitions. Here is an example of icon fonts using Font Awesome Library –

Go to font awesome official website. Either use CDN or download the library files on your system.
Link the Font Awesome CSS stylesheet to your webpage.
Visit the icon fonts library page and copy the class names of each icon you wish to use.

 <!DOCTYPE html>
    <html>

    <head>
       <link rel="stylesheet" href="[https://use.fontawesome.com/releases/v5.7.2/css/all.css](https://use.fontawesome.com/releases/v5.7.2/css/all.css)" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
           crossorigin="anonymous">
       <style>
           body {
               background-color: rgba(66, 117, 156, 0.123);
           }

    h1, .icon-fonts {
               text-align: center;
           }

    i {
               font-size: 75px;
               display: inline-block;
               margin: 0 10px;
           }

    .fa-facebook {
               color: #3b5998;
           }

    .fa-twitter {
               color: #38A1F3;
           }

    .fa-instagram {
               background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
               background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
               background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
               -webkit-background-clip: text;
               background-clip: text;
               color: transparent;
           }
       </style>
    </head>

    <body>
       <h1>ICON FONTS USING FONT AWESOME LIBRARY</h1>
       <div class="icon-fonts">
           <i class="fab fa-facebook"></i>
           <i class="fab fa-twitter"></i>
           <i class="fab fa-instagram"></i>
       </div>
    </body>

    </html>

There are a lot of websites offering free icon font packages –

If you want to create a custom icon font pack using icons from different libraries like above, then visit Icomoon app page. Import icon files from your system or picks the icons from icomoon library to build your own custom icon pack. This way, you only to add the icons which you need in your project instead of bloated library files containing several thousand icons. This will enhance your website’s performance by decreasing the file size and the number of server requests.

Icon fonts are beyond doubt the widest solution for web icon. However, just like CSS image sprites, Icon fonts are losing their patrons to SVG. Although icon fonts are vectors making them scalable to any resolution, still they are not free from snags. Using icon fonts can lead to the generation of multiple server requests and can also lead to invisible text flashing during the period when font libraries are still loading. If the browser for some reason does not comprehend the icon font, a blank space is displayed. This is the reason why a lot of developers prefer the latter in icon fonts vs SVG icons.

Dazzling SVG Icons!

SVG as I stated in the introduction stands for “Scalable Vector Graphics”. The primary purpose of SVG icons is to define vector-based graphics in XML format. SVG icons are slowly earning the stature of a new standard for web fonts and images. Instead of a font or an image, SVG is instead a block of XML code directly served to a browser which renders it in an intended manner. More and more developers are leaving behind icon fonts and are adopting SVGs. Not only does offer SVG offer an unmatched ability to be scaled to any size without any shred of quality degradation but also better anti aliasing than Icon fonts. Moreover, you can edit, color, or animate each individual bit of an SVG icon, unlike your traditional icon font. Also since SVG icons are just a block of code, their sizes are much lower to that of image based PNG JPEG icons. Although in this regard of file size, icon fonts edges out even SVGs. I will be talking a detailed comparison between icon fonts vs SVG icons later in the blog.

Although there are multiple ways to use SVGs the one that is of keen interest to us is “Inline SVG”. The key benefit of using inline SVG icon instead of the external SVG icon is that it does not increase server request which could have had an adverse effect on your site’s performance. Here is an example of Inline SVG image –

<!DOCTYPE html>
<html>

<body>

   <h1>INLINE SVG</h1>

   <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
       <rect width="100%" height="100%" stroke="#9b59b6" stroke-width="5" fill="#2ecc71" />
       <circle cx="250" cy="250" r="150" fill="#f1c40f" stroke="#e74c3c" stroke-width="5" />
       <text x="250" y="250" font-size="20" text-anchor="middle" fill="black">THIS IS AN INLINE SVG</text>
       Sorry, your browser does not support inline SVG.
   </svg>

</body>

</html>

Do you know? User-select-none describes a method of preventing text/elements from being selected using CSS. It will work in all major browsers, including IE7 and up.

Comparing Icon Fonts vs SVG Icons

Now, that we are done with the flashback. I will compare Icon fonts vs SVG Icons. We will look at 8 key metrics to compare Icon fonts vs SVG Icons.

1. File Size

When it comes to file sizes icon fonts have a slight edge over SVGs. Your file size can be considerably larger if you are using Inline SVG over external SVG icon file. One major reason for this is the fact that unlike external SVG, Inline SVG is not cached by the browser. One way of reducing the file size is SVG sprites. However, SVG sprites can only be colored using filters or masks which suffer from a poor browser support. For multicolored icon, using Inline-svg is necessary.

Verdict on Icon Fonts vs SVG Icons — File Size : As far as file size is concerned Icon font has a slight advantage over SVG. However the difference in file sizes is not that prominent and can be ignored.

2. Accessibility

One major advantage of SVG icons over Icon fonts is their superior accessibility. SVGs are armed with built in semantic elements — like < title > and < desc > that makes it accessible to screen reader and text browsers. Unlike icon fonts, SVGs are treated as an image and not as a text. Moreover SVG is compatible with WAI-ARIA specifications — aria-labelledby attribute.

Verdict on Icon Fonts vs SVG Icons — Accessibility: When it comes to accessibility, SVG is the clear winner.

3. Performance

As we have discussed earlier, Icon fonts are standard fonts which can be easily cached and boost load speed. However, this merit is plagued with a major flipside — it would require addition HTTP Server request for caching. On the other its the opposite case with inline SVG. Inline SVG do not make any additional server requests, however it cannot be cached by the browser as it is considered block of HTML code. This can be solved by using External SVG file.
Choosing which icon system is right for you depends squarely on your need — if you need a few icons without any multicolor modifications and animations then icon fonts are the right choice. However, if you are using a large number of icons which are multicolored and have animations then, SVG should be the right choice. Another concern with icon fonts is that they may encounter occasional failures. Loading errors leave black spaces which can have an adverse effect on page design.

Verdict on Icon Fonts vs SVG Icons — Performance: SVGs have a slight edge as Icon fonts are susceptible to occasional failures.

4. Scalability

As we discussed before, icon fonts are considered as regular fonts by browsers. Therefore icon fonts are vulnerable to anti-aliasing techniques implemented by the browser which affects the visual quality of the icon making it blurry and less sharp. On the other hand, SVGs are treated as images by browsers, so no anti-aliasing rules are applied on SVGs. This ensures that SVGs are sharp and pixel perfect at all resolutions without suffering any noticeable degradation.

Verdict on Icon Fonts vs SVG Icons — Scalability : In terms of scalability, SVGs have a big advantage over Icon fonts.

5. Animation

While Icon fonts allow a decent degree of customization using standard CSS styling rules as compared to Image icons, still icon fonts are limited as far as flexibility is concerned. CSS styling modifications are limited to monochromatic color, size, standard transforms, and animations. SVGs not only enjoy the same CSS controls as icon fonts but also additional CSS stroke properties and filters. Each individual stroke in SVG icon can be animated independently. For example, in a clock-icon animation, mail opening/closing animation, notification bell animation. SVGs allow to modify individual parts of the vector to create multichromatic icons and images and even add animates to each individual stroke separately.

Verdict on Icon Fonts vs SVG Icons — Animation : SVGs over a much higher degree of versatility as compared to Icon Fonts in terms of modifications and styling control.

6. Positioning

As icon fonts are inserted using pseudo-elements, their positioning is sometimes challenging. You might need to tweak different CSS properties like font-size, line-height, word-spacing, letter-spacing, vertical-align to align the icon font in the desired position. For SVGs positioning is much simpler. You only need to specify the size.

Verdict on Icon Fonts vs SVG Icons — Positioning: It is much easier to position SVGs as compared to Icon Fonts.

7. Deployment

Icon fonts are generally considered quicker and less complex to deploy either using @font-face rules, cdn or CSS style sheets. On the other hand, there are multiple ways to use SVGs either as regular

image, background images, objects or inline SVGs. Inline SVG is by far the most popular way to deploy a SVG icons as it allows a high degree of modifications without triggering additional server requests to drain performance.

Verdict on Icon Fonts vs SVG Icons — Deployment: No clear winner. Icon fonts are slightly easier to deploy but SVGs over a higher degree of modification and better performance.

8. Cross Browser Compatibility

With regards to cross browser compatibility, Icon fonts enjoy a clear advantage over SVGs. Icon fonts enjoy complete support across all Desktop and mobile browsers and all browser versions including legacy IE6 to IE8. Although, SVG(basic support) offers cross browser compatibility across every browser except IE8 and below versions. Similar is also observed for some ancient browser versions of Android browser, Firefox & Safari.

If we look at implementing SVG at scale then the cross browser compatibility poses a major challenge. For instance:

→ SVG effects for HTML

If you plan to make use of SVG effects for HTML then make sure to perform a thorough round of cross browser testing.

→ Similarly, SVG Favicons also calls for a cross browser compatibility testing.

→ Or, even if we talk about SVG SMIL animation. The browser compatibility issues are still faced over numerous browser versions.

This is one minor drawback of using SVGs as compared to Icon fonts which enjoy excellent browser support across the board. There are also slight concerns that IE9–11 and Microsoft edge sometimes do not scale SVGs in a proper manner although this can be easily rectified by tweaking some CSS rules.

That looks a bit scary and unfortunate for SVG lovers. Fortunately, we have automated cross browser testing tools such as LambdaTest who can help us quickly identify any anomaly is rendering of SVG on more than 3000+ real browsers and browser versions through a Selenium Grid on cloud along with manual live-interactive testing of your web-app by loading it on your desired OS/browser configuration through a VM hosted by LambdaTest cloud servers.

Verdict on Icon Fonts vs SVG Icons — Cross Browser Compatibility: Icon fonts enjoy much wider Cross browser Compatibility support as compared to SVGs. However, you can try to plug this gap by either using necessary fallbacks or Polyfills.

Check this: Transforms3d- Transform the elements of your design in 3D space with the transform property. The perspective property sets the perspective in z-space and the backface-visibility property toggles display of the reverse side of a transformed element.

How To Build Your SVG Icon System?

Icon Fonts provide a convenient way to developers to add any icon to their page within seconds. All the icons are available in a single file either hosted locally or on a CDN and you can easily choose any icon to display using the corresponding class or code. One of the most popular Icon font library is Font Awesome, which we used in our example in the above section. We now want to have a similar functionality with SVG Icons where a single SVG sprite has all the icons bundled in it. To build such custom SVG icon system, you first need to either choose individual icon files or select from existing font icon library. These files can either be icon fonts or svg icons. If they are icon fonts, you would first need to convert them into SVG icons.

Step 1 — Converting WOFF/TTF/OTF Into SVG

The best tool to convert Icon fonts of WOFF/TTF/OTF format into SVG icons would be Online Font Converter tool. Visit the site and select output font type as SVG.

Now extract the zip file and place the SVG icon (svg extension) file in your fonts folder. Convert all your Icon Fonts into SVG cons.

Step 2 — Build Your SVG Icon System

Now once you have all your icons in “.svg” format, we can go ahead and build your custom SVG icon system. For this task there are multiple tools available at our disposal –

The best tools that i would recommend is Fontastic and IcoMoon. One advantage that Fontastic offers over IcoMoon is permanent hosted CDN link for our SVG sprite, that too available for free account. IcoMoon on the other hand offers temporary 24 hours CDN hosting only, permanent reserved for premium account users. But IcoMoon offers a much larger Font Library selections of its own and other popular 3rd party libraries as well. In this Blog i would be explaining building your Svg icon system using IcoMoon.

Now that you are ready to build a SVG sprite, upload your custom SVG Icons and follow the steps –

Go to IcoMoon App page and click on “Import Icons”
Choose the .svg icon file that you downloaded from Online font convertor or any other SVG icons. Select the files and click on Generate SVG

Once you have extracted the Zip, the files that we would need are symbol-defs.svg and svgxuse.js.

Instead of uploading custom fonts, you can also use an existing library like font awesome and linea to select the svg icon that you require in your project. This will help to reduce file size as you won’t need to add the entire library to your project, Simple go to IcoMoon App homepage and select add icon from library.

Step 3 — Using Your SVG Icon System

Using your SVG Icon System with Inline SVG.
To insert your icons as inline SVGs (with the element), copy the < svg > element (that contains symbol definitions) and then use icons with the following code –

<svg class="icon-twitter"><use xlink:href="#icon-twitter"></use></svg>

Here is an example code using our SVG Icon system containing 3 icons — twitter, facebook and instagram as Inline SVG –

`<!doctype html>
<html>

<head>
   <title>IcoMoon - Inline SVG</title>
</head>

<body>
   <!--This SVG ELEMENT CONTAINS SVG DEFINITION-->
   <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"
       xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)">
       <defs>
           <symbol id="icon-twitter" viewBox="0 0 32 32">
               <title>twitter</title>
               <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
           </symbol>
           <symbol id="icon-facebook" viewBox="0 0 32 32">
               <title>facebook</title>
               <path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z"></path>
           </symbol>
           <symbol id="icon-instagram" viewBox="0 0 32 32">
               <title>instagram</title>
               <path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0zM16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331zM26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path>
           </symbol>
       </defs>
   </svg>

<header class="bgc1 clearfix">

<svg class="icon-twitter">
           <use xlink:href="#icon-twitter"></use>
       </svg><span class="name"> icon-twitter</span>

<svg class="icon-facebook">
           <use xlink:href="#icon-facebook"></use>
       </svg><span class="name"> icon-facebook</span>

<svg class="icon-instagram">
           <use xlink:href="#icon-instagram"></use>
       </svg><span class="name"> icon-instagram</span>

<script defer src="svgxuse.js"></script>
</body>

</html>`

Using your SVG Icon System with an External SVG.

If you prefer to use external SVG (containing ) instead of embedding SVG definitions in HTML, you will need to use “svgxuse.js” in order to support IE 9+. Browsers that don’t support referencing external SVGs (such as IE 9), this polyfill sends a single HTTP request to fetch as well as cache all symbol definitions. Note that it must be hosted on a web server to work

`<svg class="icon-twitter">
                   <use xlink:href="symbol-defs.svg#icon-twitter"></use>
              </svg><span class="name"> </span>`

Here is an example code using our SVG Icon system containing 3 icons — twitter, facebook and instagram as Inline SVG –

 <!doctype html>
    <html>

    <head>
       <title>IcoMoon - EXTERNAL SVG</title>
    </head>

    <body>

    <svg class="icon-twitter">
           <use xlink:href="symbol-defs.svg#icon-twitter"></use>
       </svg><span class="name"> </span>

    <svg class="icon-facebook">
           <use xlink:href="symbol-defs.svg#icon-facebook"></use>
       </svg><span class="name"> </span>

    <svg class="icon-instagram">
           <use xlink:href="symbol-defs.svg#icon-instagram"></use>
       </svg><span class="name"></span>

    <script defer src="svgxuse.js"></script>
       <svg class="icon-twitter">
           <use xlink:href="#icon-twitter"></use>
       </svg>

    </body>

    </html>

STEP 4 — How To Style SVG Icons

To style your SVG icon, simply use the selectors –

`[class^="icon-"]and [class*=" icon-"]to apply styling.`

<style>
           [class^="icon-"],
           [class*=" icon-"] {
               display: inline-block;
               width: 1em;
               height: 1em;
               stroke-width: 0;
               stroke: currentColor;
               fill: currentColor;
           }
    </style>

It is necessary to specify width and height for the svg icon so that it isn’t very large and out of proportion with respect to surrounding text and other elements. This is why we set the width and height to 1em, which makes the font size equal to nearby text. You can give it any custom value of your choice.

Do you know? Text-stroke declare the outline (stroke) width and color for text.

That Was My Opinion. Tell Me Yours?!

This debate of Icon fonts vs SVG icons has been raging for quite some time now and both sides have their share of proponents advocating merits of their respective Icon Systems. However, there has been a major shift in developer community towards adopting SVG icons in recent times and shows no signs of abating. As far as browser support is concerned, SVG is right up alongside Icon fonts for IE9+ and Android 2.3+, thus covering 99%+ user base while offering far greater accessibility, scalability, and control.

SVG do struggle in terms of cross browser compatibility. In order to plug this browser compatibility issue with IE6-IE8, you have a couple of remedies at your disposal — either use dedicated fallbacks in form of texts or PNG images, using modernizr javascript feature detection library or use a Polyfill(like SVG4Everybody) to add SVG like functionality in unsupported browsers. I will be showing you those remedies in one of my upcoming articles. Stay tuned!
Oh, and don’t forget to mention your favourite out of the two debated, Icon fonts vs SVG icons?

Why Vertical Text Orientation Is A Nightmare For Cross Browser Compatibility?

nikhiltyagi04 — Tue, 26 Mar 2019 10:53:36 +0000

The necessity for vertical text-orientation might not seem evident at first and its use rather limited solely as a design aspect for web pages. However, many Asian languages like Mandarin or Japanese scripts can be written vertically, flowing from right to left or in case of Mongolian left to right. In such languages, even though the block-flow direction is sideways either left to right or right to left, letters or characters in a line flow vertically from top to bottom. Another common use of vertical text-orientation can be in table headers. This is where text-orientation property becomes indispensable.

CSS Text-Orientation

The method that we will focus upon in this blog is by the use of CSS text-orientation. ‘text-orientation’ is a CSS property that defines the orientation of characters within a line. Remember that text orientation needs to be used in conjunction with the writing-mode property. It can only be used when writing-mode is set to vertical(either vertical-rl or vertical-lr). It will not work if writing mode is set to horizontal(horizontal-tb).

Syntax:

text-orientation: mixed | upright | sideways;

By default, text-orientation is set to mix.

Mixed: horizontal scripts will be rotated 90deg clockwise while vertical scripts remain unaffected.
Upright: all characters will remain in upright orientation even if block-flow is vertical
Sideways: All text(horizontal and vertical scripts) will be rotated sideways – 90deg clockwise.

Browser Support

Head over to caniuse and search for ‘CSS text-orientation’ to get an in-depth insight into which browsers and specific browser version supports this feature.

Cross browser compatibility of CSS text-orientation property – caniuse

Remember that text-orientation in CSS3 is a relatively new feature and might undergo syntax changes and alterations in future. Although, it is supported by all the major browsers like Chrome, Firefox, Opera and Safari, the major exceptions are Microsoft Edge and Internet Explorer. It is prudent to use some kind of fallbacks for such unsupported browsers which will further ease our effort for cross browser testing.

You can also see CSS text-orientation in action as you head to performing cross browser testing for acknowledging the browser support for vertical text-orientation on LambdaTest Experiments. Not only does it displays a live example for this feature with code but also the list of all the major browsers which support and do not support the particular feature, it can also detect user’s current browser and operating system.

Lambdatest Experiments – CSS vertical text-orientation

Before using text-orientation, we need to first look into the writing-mode property and understand the concepts of block-flow and inline-flow direction.

Writing Mode

‘writing-mode’ property specifies if lines are set to horizontal or vertical text-orientation. Also, the direction in the text block progresses – left to right or right to left. Writing Mode can have 3 values – horizontal-tb, vertical-lr or vertical-rl.

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

Note: There are 2 more experimental values which should not be used in production code.– ‘sideways-rl’ or ‘sideways-lr’. Also, old values like lr, lr-tb, tb, tb-rl, rl have been deprecated.

Writing-mode introduces 2 key concepts-

Block flow Direction: Specifies the direction in which block-level boxes are stacked inside a container. It can either be top to bottom, left to right or right to left.
Inline Flow Direction: Specifies the direction in which content flows inside the line of text, and where a new line starts. It can either be horizontal or vertical.

To achieve a vertical text orientation, set the writing mode property to vertical-lr(or vertical-rl) and set text-orientation to upright.

Wondering About LambdaTest?

LambdaTest is a cross browser testing cloud which helps you to perform browser compatibility testing in an effortless manner on over 2000+ browsers and browser versions. You can perform manual cross browser testing by directly interacting with real browsers through a VM hosted on their cloud servers. You could also perform automated cross browser testing using their Online Selenium Grid through a test automation framework of your choice.

Creating Vertical Text With “text-orientation” Property

To create vertically oriented text, you need to set text-orientation in CSS to upright along with writing -mode set to vertical-lr. As we discussed earlier, CSS text-orientation will only function if the writing-mode property is set to vertical (either vertical-rl or vertical-lr) and not horizontal (horizontal-tb).

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
        .vertical-text {
            writing-mode: vertical-lr;
            text-orientation: upright;
            background-color:red;
        }

        @supports(text-orientation:upright){
            .vertical-text{
                background-color: greenyellow;
            }
        }

    </style>
</head>

<body>
    <h1>CSS text-orientation property is supported by Google Chrome, Firefox, Opera and Safari</h1>
    <span class="vertical-text">
        Vertical Text using text-orientation
    </span>

</body>
</html>

We can utilise LambdaTest as a cross browser testing tool to interact with your website live using their real-time testing feature. Real time testing would present your website on a VM hosted by LambdaTest cloud servers. You can also perform automated screenshot testing to capture multiple screenshots in one go of our webpage across different desktop and mobile browsers to fix browser compatibility issues. You can do all that on your locally hosted webpages using Lambda Tunnel which helps to establish an SSH(Secure Shell) connection between your machine to their cloud servers.

LambdaTest Real Time Testing – CSS text-orientation property supported by Google Chrome

CSS text-orientation property is neither supported by Microsoft Edge nor Internet Explorer – LambdaTest Real Time Testing

Alternative Methods To CSS Text-Orientation

1.Word Break

CSS ‘word-break’ property defines how a line break occurs whenever text reaches the end of the line and would overflow its container.

Syntax

word-break: normal|break-all|keep-all|break-word;

normal: default rule for a line break.
break-all: to avoid overflow from container word is broken at any letter.
keep-all: same as normal but for Chinese, Japanese and Korean – do not use any word break.
break-word: in absence of breakpoints in a line, work can be broken at any arbitrary point.

Browser Support

Unlike text-orientation, the word-break property is supported by all browsers including Microsoft Edge and all versions of Internet Explorer as well.

Creating Vertical Text With Word-Break Property

We can set the word-break property to break all value and reduce the width of the container to 0px. This would force all the words to be broken at every letter and appear in a vertical fashion. Also set white-space to pre-wrap to make sure white spaces(blank space) is visible so that the distinction between words can be made.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
       h2 {
          margin-left: 10%;
           width: 50%;
           text-align: center;
       }
       .vertical-text {
           margin-left: 100px;
           width: 0px;
           word-break: break-all;
           white-space: pre-wrap;
           color: rgb(121, 202, 0);
       }
   </style>
</head>
<body>
    <h2>Using css word-break property as fallback to text-orientation. word-break is supported by all browsers including Edge and IE</h2>
   <p class="vertical-text">word-break css property</p>
</body>
</html>

Vertical text orientation with CSS word-break property which is supported by Microsoft Edge and Internet Explorer

2.Word-wrap/overflow-wrap

The CSS word-wrap forces allow long words to be broken and wrapped onto the next line to avoid overflow. The word-wrap property is now also reffered as overflow-wrap. All browser support the word-wrap syntax including Edge and IE while Chrome and opera support the new overflow-wrap syntax.

Syntax

word-wrap: normal|break-word|initial|inherit;

normal: Break words only at normal separation points.
break-word: Any word can be broken at an arbitrary point.
Initial: Sets to a default value.
Inherit: transfers this property from parent to a child element.

Browser Support

Just like word-break, word-wrap property is also supported by all browsers including Microsoft Edge and all versions of Internet Explorer as well.

Creating vertical text with word-wrap property

We can use the same strategy as we used in case of word-break property to reduce the width of the container to 0px and force every word to be broken at every letter and appear in a vertical orientation while each individual character remaining upright. Once again, set white-space to pre-wrap to make sure white spaces(blank space) is visible so that the distinction between words can be made.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vertical oriented text</title>
    <style>
        h2 {
            text-align: center;
        }

        .vertical-text {
            margin-left: 100px;
            width: 0px;
            word-wrap: break-word;
            white-space: pre-wrap;
            color: rgb(121, 202, 0);
        }
    </style>
</head>
<body>
    <h2>Using css word-wrap property as fallback to text-orientation. word-wrap is supported by all browsers including Edge and IE</h2>
    <p class="vertical-text">word-wrap css property</p>
</body>
</html>

Vertical text using CSS word-wrap property which is supported by Microsoft Edge and Internet Explorer – LambdaTest Visual UI Screenshot Testing

3. < br > tag

The most primitive method to achieve vertical text orientation is by the use of break < br > tags. However, this method is not very practical and should not be used if the string of text is too long.

<p>
    V <br> E <br> R <br> T <br> I <br> C <br> A <br> L <br> <br> T <br> E <br> X <br> T
</p>

4. < span > wrapping

Another popular method is to wrap each letter of the text desired to be vertically orientated inside a span tag and using CSS to assign display: block to each span wrapper. Again just like using < br > tag, this method is not practical for large text strings.

<head>
    <style>
        p span {
            display: block;
        }
    </style>
</head>
<body>
    <p>
        <span> V </span>
        <span> E </span>
      <span> R </span>
        <span> T </span>
        <span> I </span>
        <span> C </span>
        <span> A </span>
        <span> L </span>
    </p>
</body>

5. Using JavaScript

A much better approach is to use a single line of javascript code to dynamically add span wrapper around each letter of the concerned text that needs to vertically oriented rather than manually adding spans in HTML. The text is split into an array and each array element is wrapped around by span tag.

<head>
    <style>
        h1 span {
            display: block;
        }
    </style>
</head>

<body>
    <h1> VERTICAL </h1>

    <script>
        var text = document.getElementsByTagName('h1')[0];
        text.innerHTML = '<span>' + text.innerHTML.split('').join('</span><span>') + '</span>';
    </script>
</body>

Conclusion

Creating vertically oriented text has always been a challenge in CSS since time immemorial itself. No solution or fix could promise an immaculate result. However, the introduction of new CSS3 text-orientation property has completely solved that conundrum. A word of caution is appropriate for developers who are planning to deploy this feature in production version of their projects. text-orientation is relatively a new property and might undergo syntax change in future and developers shouldn’t forget to code necessary fallbacks for Microsoft Edge and Internet Explorer to ensure cross browser compatibility. If you have any other alternatives to text-orientation in mind, let me know in the comments below.

Original Source: lambdatest.com

Related Posts