|
|
|
|
Issue #104 (cssText/selectorText, jQuery, Mobile, Jamstack)07/16/15
 |
Inboxtrail takes the guesswork out of emailing! Run a delivery test before sending important emails and you'll never have to wonder if your message will get received. If Inboxtrail detects spam-filtering, then it's time to modify your email & test again. Only send when you know you'll land in the inbox. Try it for free. |
Let's do some more fiddling with the DOM CSS API. As explained in a previous issue, you can grab all stylesheet elements on a page, or a specific stylesheet element, then grab bits of info from any one of the stylesheet objects.
Let's say we have a page with the following CSS, and nothing more:
|
body {
color: white;
background: #ccc;
font-weight: bold;
line-height: 1.5;
font-family: Arial, sans-serif;
text-shadow: #555 2px 2px 2px;
}
|
The styleSheets object is broken up into cssRules objects, one rule for each rule set (or at-rule). In this case, there would only be one css rule, because that's all I've included. Each cssRule object allows us to read the cssText content or the selectorText content:
|
var myRules = document.styleSheets[0].cssRules,
d = document.body;
console.log(myRules[0].cssText);
console.log(myRules[0].selectorText);
// "body { color: white; font-weight: bold; line-height: 1.5; font-family: Arial, sans-serif; text-shadow: rgb(85, 85, 85) 2px 2px 2px; background: rgb(204, 204, 204); }"
// "body"
|
(JS Bin demo)
The demo writes the results onto the page, instead of the console. As you can see, the cssText property gives you the full selector plus declaration block while the selectorText property gives you just the selector, both returned as strings.
You'll also notice, as discussed in last week's issue, the colors are in rgb() notation, even though the actual CSS is in hex. And if you happen to include a CSS declaration or selector that's invalid, they will be ignored and will not be accessible via these properties.
Now on to this week's tools!
jQuery Plugins
Bootbox.js
"Allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers."
ReadRemaining.js
"Tell your readers how long they'll need to get through all of your gibberish."
zoom.js
Medium-style image zoom.
jquerymy.js
"A lightweight jQuery plugin for complex two-way data binding in real time."
formFive
"A polyfill for your forms that makes some HTML5 form features available on older browsers."
Gmail.js
An unofficial JavaScript API for Gmail that depends on jQuery.
Selectivity.js
Modular and light-weight selection library for custom select dropdowns in forms.
jQueryTimeAutocomplete
"A time picker similar to how Google Calendar's time picker works for events. It's meant to be smart, sexy and intuitive."
RWD and Mobile Tools
QAid
This is more of a design tool, but it lets you overlay an image of your design in the browser, so you can compare the design to what the browser renders. Has breakpoint and grid features too.
clickSuck
"Forces click events to fire on touch interactions. Affectionately named after working with iOS Safari."
Anzeixer
Toolkit to streamline view definitions for RWD. This is "a set of CSS and JavaScript snippets that lets you define threshold values of views once, saving time and reducing errors."
OpenFL
"Build games and applications for almost every platform imaginable -- Windows, Mac, Linux, iOS, Android, BlackBerry, Firefox OS, Tizen, Flash and even HTML5."
Responsive Email Templates
"Five pre-tested templates that work with any mailing service."
Tabris.js
"Native mobile apps in JavaScript."
mediaCheck
"A simple wrapper around matchMedia to run code on entry and exit from media queries. It also uses browser resize as a fallback for browsers that don't support matchMedia."
Ideal Viewport Calculator
"Given a device's physical dimensions (as screen diagonal), actual hardware resolution, and average viewing distance, calculates the ideal viewport dimensions and device pixel ratio based on the CSS reference pixel."
Static Hosting, Server Tools, etc.
Up1
"A simple host that client-side encrypts images, text, and other data, and stores them, with the server knowing nothing about the contents."
dns.js.org
If you're using GitHub Pages to host your site, you can use this service that offers a free js.org subdomain-based URL (e.g. yoursite.js.org).
Netlify
"Builds, deploys and hosts your static site or app." Basic package is free forever, no credit card required.
Surge
Free static web publishing for front-end developers. Single–command, bring your own source control web publishing CDN.
Divshot
"Static web hosting for developers. Blazing fast CDN, simple CLI deployment, hassle-free test environments. And much more."
Chevereto
"A powerful image hosting script that allows you to create a beautiful image hosting website in minutes."
A Tweet for Thought
We can all relate, Sindre. We can all relate.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
The Electronic Frontier Foundation has put out a chart and accompanying report covering "Who has your back?", for 2015, which analyses which big companies are doing the best job at protecting your data from government requests.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
