In this advanced CSS tutorial, you will learn about the modern CSS techniques to overcome the older CSS problems and spruce up your entire web designing workflow.
Join the DZone community and get the full member experience. Discovering modern CSS techniques is one of the best ways to spruce up the overall web design process. If you’ve been working with CSS, you might have encountered a few layouts or cross-browser compatibility issues. For example, CSS3 styles do not work with legacy versions of Internet Explorer. Still, there are many instances where we want to use a feature and discover it is not supported or behaves differently among browsers. Therefore while working on web development technologies, browser compatibility testing of websites and web apps is also important. However, as web technologies evolve, developers are striving to figure out how to cope with other issues as well. For example, leverage other libraries to optimize the loading time of a heavily loaded website or make the div tags more responsive without relying much on Bootstrap. With the evolving and increasing challenges, CSS has evolved as well. In this advanced CSS tutorial, we will discuss 12 modern CSS techniques to overcome older problems that came with CSS. Let’s begin with modern CSS techniques! Typography is the best way to enhance the look and feel of any simplistic web page. CSS helps us to develop a foundation of essential type scales. Let’s find out how. Getting confused about what to use? %, rem, em, or px? The first thing you need to do while defining typography is – forget about px. It doesn’t scale to proportion when the user zooms in or out in the browser. The recommended unit is rem. The default value of 1 rem is 16 px, and font sizes defined in rem remain consistent when users zoom in the browser.
em is proportional to the font-size rule of the nearest ancestor of an element. It can only be used when you want the child’s behaviour of spacing relative to the parent element.
% have almost similar behaviour like em. However, when you need relative sizing, em is preferable. Preventing text-overflow is a good way of future-proofing your site. It ensures that if some text in a container increases in the future, the text does not move beyond the container or its border. If you selected a large font size globally, you might experience overflow issues on small devices. To solve this issue, we have a fluid type. It means defining a font-size value that adjusts according to the viewport, just like responsive images. You can use a code to calculate the minimum and base size. Or, you can use vw (viewport width) as the font unit. Understanding how CSS selectors work is essential if you plan to develop a reusable CSS file that you can use for other pages or UI components. In case you are on the lookout for a valuable resource that gives insightful information on CSS Selectors, do check out The Ultimate CSS Selectors Cheat Sheet. You might be already familiar with selectors based on classes, ID, and elements. Let’s take a look at some advanced selectors. Universal selectors can be used on all elements of a website. For example, if you want to have a specific margin to all elements in your page, you have to write –
What if you want to apply a specific style to certain elements having similar attributes but different class names? You can use attribute selectors. Attribute selector will apply a border to elements having class names “component_title” and “component_label.”
What if you want to make the font-size of a menu in the navigation bar bold but nav content is dynamically generated? They don’t have any specific class. You can use a child combinator. Have you seen a table with alternate rows having a different colour? Wonder how we can do that with just a few lines of CSS? The answer is Pseudo-classes. Let’s take a look at the code. It will apply a green background to the odd rows in the table. Instead of “odd” or “even,” you can also use properties like “n+1” or “3n+1” to apply different properties to different rows. When it first came to developers, the bootstrap grid was beneficial. It solved the purpose of having uniformly distributed responsive containers in devices of different resolutions. But with time, developers needed an alternate solution. We are no longer required to use a heavy library only for grids. Modern CSS techniques like grid gave us a simplified solution. Let’s find out how. So, what we did do here? First, we defined a minimum width for grid elements. In grid-template-columns, we used the repeat function so that CSS applies the same parameters to each and every column. Also, we used auto-fit instead of a number. The reason is columns will now have equal width regardless of how many columns you use, they will stretch and fill the available space. We also used the minmax() function to set the maximum width for each column and kept 1fr as the max value. This ensures that the content fills a column up to the total available space. Lastly, we added a gap and an optional rule to apply the same value among consecutive containers. The result? There is only one drawback. For more than three columns, in some viewports, you may find an orphan column.
