Articles > CSS

So you’re getting started with CSS, and you’re having a little trouble keeping it organized. Well, CSS has an inherent organization method that is right in the name: The Cascade. Whatever you write first will impact everything that comes after it; and it can all be overridden where needed. That, of course, is predicated on the idea that you’re building a small, static HTML site in 1998-to-early-2000s. Those were the days. Get off my lawn. Don’t get me wrong. The Cascade is as important as ever,...

During the recent years, CSS variables have sparked a lot of debate. On one hand, there are those who have been asking for them to be included and finding various workarounds to add a more programmatic approach to CSS. On the other side of the coin are those who argue that CSS variables have no place in a language that is supposed to handle the presentation of elements. However, with the release of Chrome 49 and Firefox 43, it’s clear that CSS variables are now available in the form of custom properties and...

PostCSS is a CSS post-processor engine that uses JavaScript plugins to enable the transformation of regular CSS. These plugins are very useful in PostCSS and allow one to use them in different and exciting tasks such as working with images, adding variables, nesting, conditionals and transpiling and prefixing CSS to work in older browsers. One of the most important things that comes with PostCSS is that it offers developers a modular approach, meaning that they can install only the plugins that they...

Modal windows were always the realm of JavaScript and there are plenty of scripts to try. But with CSS3 it’s even easier to create a modal in pure CSS. The effects are somewhat limited but you can still make an excellent experience without relying on scripting. Most of these CSS examples are scattered to various corners of the web so I’ve curated some of the best ones here. These vary from simple code snippets to more thorough libraries but they’re all open source and reusable. 1. CSS Modal...

A few simple transitions can make a huge difference. In this article we’ll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great. Transitions vs Animations ... Transitions are a great way to smooth the changes from one state to another, and back again, in the browser. They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways. For example, a transition isn’t...

CSS rules were made to be broken, or at least that’s the idea behind !important. !important is a CSS rule that makes it possible to override other previous styles spread across multiple style sheets. !important essentially defines something as important (imagine that!), ignoring subsequent/conflicting rules. It makes the CSS style with the !important designation the one that counts most, nullifying any others. Essentially, it gives a CSS value more weight than it otherwise would normally...

Browser development has often seemed like an endless cycle of disappointment for wed developers. A new standard is recommended, and maybe one browser implements it as a feature. It looks cool. But we can’t allow ourselves to get excited... not yet. That way lies pain, sadness, and five years to a decade of waiting for the feature to become viable. Remember how long it took us just to get working transparent .PNGs in every browser? Yeah. That took a while. Well, that could all be changed in a big way, sort...

This is a part of series, where we explore CSS frameworks that are well-made and have great ideas, but never took off like the “big two”. In the first article in this series, I ranted about the wonders of Titon Toolkit. I loved it because it was made to be customized, to be abused, and built upon. Well, I’ll try not to rant about that sort of thing too much, because it’s a feature common to a few of the frameworks that I’ve selected for this series, including today’s. It’s called spaceBase, and...

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.