40 new icons, spinner-style rotation with CSS animations, smaller file size, possibility to sub-set the font to only include the icons you need.
Examples how to create dozens of shapes using pure CSS and a single HTML element.
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.
Harry Roberts, a youngster from the UK, wrote a comprehensive article telling you how to smell CSS rot early.
Examples:
… and more.
David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM mutation events or check the DOM manually – simply put: no deprecated API, no retarding loops.
With the CSS in place you add a listener for your custom 'DOM changed' event and that's it!
navy 0.5.1+ gives empty navigation containers a CSS class .navy-empty which you can hide via
.navy-navigation
&.navy-empty
display: none
Xfce gives you a million options to configure your panels. Together with Xfce's sometimes arcane configuration UI, this can be a huge time waster and super-annoying if you need to get work done the same day.
This card describes how to setup a classic panel layout as you might be used to from Gnome 2 or Windows (see screenshot below). You can use this to quickly get productive in Xfce, and as a starting point for further customization.
The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle).
The children need to be block elements.
<div class="parent">
<div class="child"></div>
<div class="child"></div>
...
</div>
.parent {
display: table-cell;
vertical-align: middle;
width: 500px;
height: 300px;
}
.child {}
When .child elements are inline elements, add `display: bl...
Ever wanted to preview a pattern from Subtle Patterns on your site without the hassle of swapping out images and modifying CSS?
Subtle Patterns Preview provides a simpler way to do it.
Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a modern look.
However, icon fonts can be very awkward to use compared to raster icons. Elements are given icons by giving them a special class like icon-plus or icon-home:
<span class="icon-plus">Create</span>
The icon font's stylesheet will then recognize this class and insert the icon as the element's :before style.
In practice, this pattern will give you a lot of hea...
You can use scheme-less URLs (or protocol-relative URLs) to have browsers use the current protocol (HTTP or HTTPS) when loading content referenced with such an URL.
A protocol relative URL doesn’t contain a protocol. For example,
http://stevesouders.com/images/book-84x110.jpgbecomes//stevesouders.com/images/book-84x110.jpgBrowsers substitute the protocol of the page itself for the resource’s missing protocol. Problem solved!
But:
Internet Explorer 7 & 8 will download st...
Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.
Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.
Some advice:
Remember the attribute list of box-shadow is x-offset, y-offset, blur radius, shadow r...
Richard Powell presents a collection of CSS styling advice that's mainly taken from SMACSS. Although at makandra we're using BEM instead of SMACSS, here's my favorites.
It is never safe to assume there will only ever be one of something on a page so do not use ID's for CSS. Id's are much better used as javascript hooks so use them for this instead.
.list {…} instead of #list {…}
Inline styles added by javascript are h...
Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.
This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tail...
CSS transitions make your responsive websites smoother and more professional. It's easy and already there. Use it!
Note: Modern Rails has two build pipelines, the asset pipeline (or "Sprockets") and Webpacker. The principles below apply for both, but the examples shown are for Sprockets.
Every page in your application uses many assets, such as images, javascripts and stylesheets. Without your intervention, the browser will request these assets again and again on every request. There is no magic in Rails that gives you automatic caching for assets. In fact, if you haven't been paying attention to this, your application is probabl...
A print stylesheet is easy to create. Choose a font suited for paper, hide some elements, done. Unfortunately print stylesheets often break as the application is developed further, because they are quickly forgotten and nobody bothers to check if their change breaks the print stylesheet.
This card describes how to write a simple Cucumber feature that tests some aspects of a print stylesheets. This way, the requirement of having a print stylesheet is manifested in your tests and cannot be inadvertedly removed from the code. Note that you can...
There are many fun Unicode characters like ▲ or ☯. You might be tempted to use them for graphical elements in lieu for an image. After all they are so much easier to style and scale than a raster image!
Unfortunately you will discover that these symbols render very differently on Linux, Windows and MacOS. The reason for this is that the font you are using will probably not contain any characters outside the standard Latin-1 set. When browsers encounter a character not included in the current font, they use a fallback font for this one cha...
Nice list of icon sets that come in the form of fonts.
I recommend Font Awesome.
If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can fix that. Usually this should not happen, as it's not a default setting:
![Screenshot](https://makandracards.com/makandra/10913-how-to-fix-firefox-uses-incorrect-fonts-on-all-webpages-regardless-of-their-c...
Internet Explorer until version 9 has some limitations when parsing CSS files
Summarized, these are:
To test the selector limit for a specific browser, check this CSS selector limitation test website.
When you run into this issue, the following links might be helpful to fix the problem. The Idea is to split up the css fi...