|
|
|
|
Issue #22 (style object, Git/CLI, Mobile, CSS)12/19/13
Many of you are probably familiar with the style object that is accessible via JavaScript to give you CSS information for a given element. Unfortunately, the style object will only give you access to CSS that is applied via the style attribute on the HTML element, so it is of limited use.
Nonetheless, you may find it handy to know that the style object has some lesser-known properties and methods. Firstly, when using the style object, you can access inline styles individually by simply camel-casing them:
// get bg color defined via inline styles
var bgc = element.style.backgroundColor;
|
Remember, this technique will not glean any information from styles that cascade from a style tag or from a linked stylesheet; it will only get styles that are defined inline on the style attribute in the HTML. But in addition to the individual properties, you can also use a few other features.
You can get the full list of applied inline styles using the cssText property:
var inlineStyles = element.style.cssText;
|
Which will spit out a string like "background-color: blue; float:left;" (or whatever is defined via inline styles).
Using length, you can get the number of different long-hand properties defined on a single element:
var inlineStyles = element.style.length;
|
Note that although you might only have 3 inline styles defined, this might return a larger number than 3, because, as mentioned, it returns the number of longhand styles. So if the only style present was "border: solid 1px #ccc" then instead of returning "1", the length would (oddly) return "17". This includes all the border-related properties that make up border shorthand, along with all the border-image related properties (which can be reset using border but not defined directly).
You can also get the "priority" of an inline declaration:
var getPriority = element.style.getPropertyPriority('width');
|
So in this case, if the width property was defined inline using the !important keyword, this would return a value of "important". Otherwise it will return nothing.
Of course, since we do well to avoid inline styles as much as possible, these features might have limited use. But if you have a case where user-generated content is adding inline styles, or if you're using/writing an animation library that adds styles inline, these might come in handy.
You can see these in action in this JS Bin demo. And here's some further reading:
Now on to this week's tools!
Git/GitHub/Terminal/Console Tools
smarter_js_console
A smarter JavaScript console for browsers old and new.
Git Reports
"A free service that lets you set up a stable URL for anonymous users to submit bugs ... to your GitHub repositories, without exposing your code, requiring users to log in with GitHub, or using a messy two-repository solution."
My GitHub issues
Shows you all GitHub issues assigned to you, across all organizations, on a single page.
Namecast
"Manage your DNS through GitHub."
Prune
"Improves the GitHub pull request workflow by providing stakeholders an environment to quickly evaluate and test the code in-browser before merging."
github-stars
"Returns the aggregate number of stars for a user/org or single repo." Works either synchronously or asynchronously.
jumbyl
"Post to Tumblr from the command line." Still in early development, so might not be ready for reliable use.
Scoop
"A command-line installer for Windows. Scoop installs the tools you know and love."
cmder
"A software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout."
Responsive Design Tools
resimagecrop
"RESS based solution for cropping images for responsive design."
viewportSize
"Allows you to get the width and height of the CSS viewport using JavaScript."
Class Query
"Creates media queries from .classquery- classes for elements with data-classquery attributes."
ResponsiveComments
"Provides a solution to simple conditional loading, directly within your markup, using HTML comments, media queries and feature detection." Based on the fact that HTML comments are accessible as part of the DOM.
eq.js
"Aims to be a relatively easy to use drop-in solution to JavaScript powered element queries."
Slimmage
"Your wait for a sane, easily managed path to responsive images has now ended. With Slimmage, CSS controls which image size is downloaded, not HTML"
URL-CAP
Generate screenshots of a website on mobile, tablet, and desktop sized screens.
Ink
"A responsive email framework, used to make HTML emails look great on any client or device. It includes a 12-column grid, as well as some simple UI elements for rapid prototyping."
HTML/CSS Tools
Type Rendering Mix
"Apply CSS based on the text rasterizer and antialiasing your browser is using."
HTMLHint
A linting tool for checking HTML with lots of customization options.
NTH-TEST
An easy to use nth-selector tester for those who are "getting their heads frazzled with nth-child and nth-of-type."
backgrounds.cm
"Use rock-solid background images in your HTML email with some help from VML and CSS."
CSS Live Reloader
A Firefox extension that reloads a web page's CSS when it gets notified of changes, which it does via WebSockets.
Kalei Styleguide
"Generates bootstrap-like documentation for your own CSS."
Black Tie
Free, attractive Bootstrap themes.
HTML5 ADMIN
"Responsive HTML5 Admin Template using Bootstrap v3."
Suggest Your Tool via Twitter
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
3 CSS E-Books for $7!
To help Web Tools Weekly stay ad free, you can offer support:
Criticism? Corrections?
If you have any suggestions, corrections, or improvements, feel free to reply to this email.
Before I Go...
Gotta love this tweet, which seems to sum up the native mobile experience quite nicely.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
