background preloader

Advanced CSS3

Facebook Twitter

Grid “fallbacks” and overrides - A very good time to understand CSS layout. I’ve been building a set of common UI patterns for my CSS Grid resource site, Grid by Example. These use CSS Grid Layout but include legacy layout in order that older browsers get some layout - even if not the full design that is implemented with Grid. Something that is apparent when doing this is how little we actually need to override. When items become grid items, much of their previous behaviour is removed. A floated, display: inline-block, display: table, or flex item all become grid items and lose the behaviour that comes with these layout types.

This is as defined in the specification, and you can see some examples in this cheatsheet. We also have Feature Queries. To be able to take advantage of the things grid enables, that simply are not possible with older layout methods, you need to be able to bridge the gap between supporting and non-supporting browsers. However you learn, do learn. Accessible, Simple, Responsive Tables.

There is no single solution to make any <table> appropriately responsive. That's what I like about this post by Davide Rizzo: it admits that, then gets on with some solutions. This is a great addition to territory we've been treading for a while. Content and Comparison tables There are many types of tables on websites where content can vary as wildly as the approaches used to make them responsive.

The tables I find most frustrating are comparison tables or normal content layout tables, there are really no comprehensive CSS based solutions for making these types of tables responsive. I set out to find a flexible and simple solution that could work as a reusable web component, regardless of the content within. Is table markup still working for us? Standard table markup seems to make semantic sense and does a pretty decent job of aligning cells. I did some tests with a simple best practice table. Approaches for Responsive Tables Not recommended ways to build a responsive table Other enhancements.

8 Tips to Write CSS You Won't Hate. We have to admit it. Most of us don't like their CSS code! When you start a new project, you feel very excited and you say “Ok, this time I'm gonna make my CSS as clear and maintainable as I can.” However, most of the time — as the project grows — we start feeling unhappy about it. It's so messy, unorganized, and hard to change. Before I start, I have to say that I'm not the most experienced one at writing CSS. I can't imagine these days anyone writing their CSS “purely” — without a preprocessor! I can't imagine writing my CSS without using variables, mixins or without nesting my selectors to where they belong.

So, it's most likely you're using one (and I assume that, because the rest of the tips depend on this). Nothing is better than knowing where to find the CSS styling rule you're looking for. By organizing I mean to separate your CSS into files. For example, I organize my CSS into four classes (not CSS classes!) After that I start importing them in my main app.styl file. Cleaning Up a CSS Codebase. You have just been onboarded to an existing project to replace a departing developer. Or maybe you just opened that old project of yours from a few years ago. You are faced with dread and horror when looking at the code.

You can do only one thing: Clean up this mess! Does that sound familiar to you? Of course it does, we all encounter this at some point or the other. You know that cleaning up a CSS codebase is going to be a tremendous task. Well you’re in luck because I’ve done my share of CSS clean-ups and I’m here to give you some hints to get started with this. Lint the Hell Out of It In this section, I will assume your codebase uses Sass. The first thing I like to do when I need to take over a codebase is lint it. Sass has a Ruby-based linter called SCSS-Lint. Try running SCSS-Lint on your Sass folder to check for errors. Fixing Linting Errors Found It’s time to fix what needs to be fixed. Revise the Structure Start with the vendor folder as it’s the one asking no questions. BEM 101. Share this: Ship custom analytics today with The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff.

Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we'd all get together on it and do it together. The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project. Here's an example of what a CSS developer writing in the BEM style might write: /* Block component */.btn {} /* Element that depends upon the block */ .btn__price {} /* Modifier that changes the style of the block */.btn--orange {} .btn--big {} In this CSS methodology a block is a top-level abstraction of a new component, for example a button: .btn { }.

#Accordion demo. What The FlexBox?! - A free 20 video course to learn CSS Flexbox. On :not and Specificity. The negation pseudo-class, :not, can be incredibly useful. It allows us to target elements based on what attributes they don't have, rather than what they do. This helps us avoid writing extra, increasingly specific, rules in an attempt to override previous ones. A common example of this is when we want to apply a style to all list items, expect the last one. For example - The :not pseudo-class is one I use a lot. When I did this, I found that the nav a elements would still not have an underline. Specificity 101 Specificity in CSS can be complicated to grasp, so it's best to start with an example. <p class="foo" id="bar">Lorem ipsum dolor sit amet. And the following styles - In cases like this where there are multiple selectors targeting the same element, which selector's rules will prevail is determined by its specificity.

What kinds of selectors are used. These two factors combined determine the level of specificity for a selector. Consider the following examples - What about :not? Preview border-corner-shape, before implementations! As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations start (it’s currently too early for that). One of the coolest features in it is border-corner-shape. While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of border-corner-shape, it will be able to do so much more! Beveled corners, scoop-style corners (informally known as “negative border-radius”), even rectangular notches. Unfortunately, until it’s implemented in browsers, it’s hard to play with it. Or, is it? Obviously, it’s not a full preview, since you can only play with a limited subset of CSS properties, but it should be good for seeing the kinds of shapes that will be possible.You could also copy the generated SVG from the Developer tools of your browser, and use it as a background in any website!

Use it here: border-corner-shape preview Enjoy! CSS3 PIE: CSS3 decorations for IE. Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it.

Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix. In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered.

It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. Firefox (and IE?) Native CSS feature detection via the @supports rule. By Chris Mills Introduction With browsers of varying degrees of standards support still in use for browsing the Web (from decent modern browsers, to old rustbuckets like IE6), we are pretty comfortable with the idea of sending different code to different browsers to provide different-but-still-acceptable user experiences. This is done in a variety of ways, but generally it relies on the rather error-prone browser detection, or the cleverer and more robust feature detection. Feature detection is normally done by writing your own JavaScript to test if a fundamental property, method, etc. of the feature you are detecting exists or can be used, or by using a 3rd party feature detection library, such as the excellent Modernizr.

Modernizr provides feature tests and mechanisms for selectively applying CSS and JavaScript based on the results of those tests, for a whole host of different HTML5 and CSS3 features. @supports syntax @supports not (display: flex) { } A @supports example Summary. CSS3 Please! The Cross-Browser CSS3 Rule Generator. 6 Smashingly Practical CSS3 Effects You Can Use Right Now. CSS3 is developing fast, and the most exciting part is seeing all of the intriguing and attractive effects that are being invented to solve real design problems. With the combined creativity of the design community, CSS3 has quickly traveled through the zone of interesting speculation and into the territory of time/resource saving practical everyday use. Today, we’re going to look at 7 impressive, concrete, real-life effects and techniques that you can implement in your next design. This isn’t going to be the usual overview of features – these are all specific techniques that will help your design work to be more advanced and effective.

Let’s dig in! Drop-down Menu What designer doesn’t have to create a drop-down menu now and then? Nothing out of the ordinary. I’d say this is definitely an awesome setup. > View Full Tutorial on WebdesignerWall Awesome Buttons > View Full Tutorial on ZURB Speech Bubble Creating a sleek speech bubble with no images – now that’s pretty neat. Letterpress Effect. CSS Style Guides. As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide. Let's round up some existing ones. But first... Not Pattern Libraries. I love pattern libraries. The List I'll list some excerpts from each that I like below.

GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → CSS Wizardry Smashing Magazine. CSS3 Patterns Gallery. Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation.

Submission guidelines If you have a new pattern to submit, please send a pull request. However, please bear in mind that I can't accept all submissions, sorry for that. Does it present a new technique?