Add Rules to Stylesheets with JavaScript. Update:Rewrites made to accurately represent current practice for stylesheet injection. Since we're using so much JavaScript in our web applications these days, we're looking for more ways to keep them fast. We use event delegation to keep event listening efficient, we use function debouncing to limit the number a times a given method can be used, use JavaScript loaders to load only the resources we need, and so on.
Another way we can make our pages efficient and fast is to dynamically add and remove styles directly to a stylesheet instead of constantly querying the DOM for elements and applying styles. Here's how it works! Getting the Stylesheet Which stylesheet you add the rules to is up to you. Var sheets = document.styleSheets; var sheet = document.styleSheets[0]; One important consideration is the media of the stylesheet -- you want to ensure you aren't adding rules to a print stylesheet when you expect the styles to display on screen. Creating a New Stylesheet Inserting Rules. The Shapes of CSS. Pure CSS collapsible tree menu. The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article.
From there I’ve come up with a solution that works pretty well. Another demo, another bug Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). General sibling combinators are flaky The CSS3 selector module has a very useful addition to compliment the CSS2.1 adjacent sibling combinator. So I dug into WebKits bug tracker and came out with this bug which has been around since 2007. <! Using Form Elements and CSS3 to Replace JavaScript. Throughout this article, vendor CSS3 prefixes are omitted for brevity. If you want to see this code in action, you can check out this JS Bin demo. Now let's consider the concepts involved in creating this tab switcher.
Notice the demo is not using any JavaScript. Hidden Radio Buttons Although this example is using radio buttons, we don't actually see any radio buttons on the page. Well, notice the markup also includes a label element that's associated with each radio button using IDs and for attributes. Thus, all we have to do is style our labels to look like tabs (I used rounded corners and a few other styles) and then target them using the :checked pseudo-class along with the general sibling selector (the tilde character, ~).
The general sibling selector lets us target both the content section of the selected tab, as well as the label element. With some absolute positioning along with z-index, we then can make the chosen section visible. Concepts to Remember. Conditional loading of resources with mediaqueries. Here is a quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand. You can check a quick and dirty screencast with the idea or just read on. Mediaqueries are very, very useful things. They allow us to react to the screen size and orientation and even resolution of the device our apps and sites are shown in. That is in and of itself nothing new – in the past we just used JavaScript to read attributes like window.innerWidth and reacted accordingly but with mediaqueries we can do all of this in plain CSS and can add several conditions inside a single style sheet.
In addition to the @media selectors in a style sheet we can also add a media attribute to elements and make them dependent on the query. So for example if we want to apply a certain style sheet only when the screen size is larger than 600 pixels we can do this in HTML: Handy isn’t it? Load all the things – even when they don’t apply. CSS3 Please! The Cross-Browser CSS3 Rule Generator.
CSS3 Generator - By Eric Hoffman & Peter Funk. Stroll.js - CSS3 Scroll Effects. All you need to know about CSS Transitions. CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU. Browser support CSS transitions are supported in practically every version of Firefox, Safari and Chrome.
They’re supported in IE 10 and onwards. If CSS animations aren’t supported in a given browser, than the properties will be applied instantly, gracefully degrading. Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed. Applying transitions A simple way of applying transitions is with CSS pseudo-classes, such as :hover.
CSS3 Buttons | Simple CSS3 framework for creating GitHub style button links. CSS Gradient | CSS 3.0 Gradient. iPhone CSS3 — JeffBatterton.com — I make impossible things. Our Solar System in CSS3 | neography. Tuesday, May 18th, 2010 This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations. The result is surprising and quite interesting. These past few months I’ve been exploring CSS3, trying to learn some of it’s new features and getting a feel for which browsers support it.
A few weeks back I put out my first experiment exploring @font-face and transforms. This time, I set out to experiment with border-radius, and what I thought was going to be a boring little project turned out to be quite interesting. Our Solar System in Modern Browsers Take a look for yourself, using only CSS and HTML I managed to create a small simulation of our solar system. For a better experience please view it on Safari, under chrome the animations lag for some reason. The Details Orbits and planets are all created using border-radius, while the animation is done via –webkit animation properties and transform.