CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but that doesn't mean that CSS and JS can't interact more closely than the basic JavaScript frameworks will allow. Here are five ways that JavaScript and CSS work together that you may not know about!
Get Pseudo-Element Properties with JavaScript
We know that we can get basic CSS style values for an element with the
style property, but what about pseudo-element properties? Yes, JavaScript can even access those too!// Get the color value of .element:before
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Get the content value of .element:before
var content = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');
You can see how I access the content property value in my blog post about Device State Detection. Incredibly useful if you're looking to create dynamic, unique sites!
classList API
We've all used the
addClass, removeClass, and toggleClass methods in our favorite JavaScript libraries. For the sake of supporting older browsers, each library would grab the element's className (in its string format) and appending/removing the class, then updates theclassName string. There's a newer API for adding, removing, and toggling classes, and it's calledclassList:myDiv.classList.add('myCssClass'); // Adds a class
myDiv.classList.remove('myCssClass'); // Removes a class
myDiv.classList.toggle('myCssClass'); // Toggles a classclassList has been implemented for a long time in most browsers, but this API hit IE at version 10.Add and Remove Rules Directly to Stylesheets
We're all well versed in modifying styles via the
element.style.propertyName method, and we've used JavaScript toolkits to do it, but did you know you can actually read and write rules within new and existing stylesheets? The API is actually quite simple too!function addCSSRule(sheet, selector, rules, index) {
if(sheet.insertRule) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else {
sheet.addRule(selector, rules, index);
}
}
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");
The most common use case is creating a new stylesheet, but if you want to modify an existing stylesheet, go for it.
Load CSS Files with a Loader
Lazy-loading resources like images, JSON, and scripts is a great way to decrease load time. We can load those external resources with JavaScript loaders like curl.js, but did you know you can lazy load stylesheets and get that notification within the same callback?
curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// Do something with MyWidget
// The CSS reference isn't in the signature because we don't care about it;
// we just care that it is now in the page
}
});
This blog lazy loads PrismJS, the syntax highlighter, based on the presence of
pre elements. Once all resources are loaded, including the stylesheet, I can fire off a callback. Useful!
CSS pointer-events
CSS'
pointer-events property is interesting in that it almost acts in a JavaScript-like way, effectively disabling an element when the value is none but otherwise allowing the element to function per usual when the value isn't none. You may be saying "so what?!" but pointer-events even prevent JavaScript events from firing!.disabled { pointer-events: none; }
Click on that element and any
addEventListener callback you've placed on the element will notfire. A perfect property, really -- you don't need to do a className check before you decide whether or not to fire something based on class presence.
Those are just five ways that CSS and JavaScript interact that you don't always think of. Have more ideas? Please share them!
Comments
Post a Comment