CSS Grid & the Firefox Grid Inspector Tool
Leave a reply
Category Archives: CSS
MaintainableCSS
Importing CSS Breakpoints Into Javascript
A quick and easy solution to this problem is to have your JS import the breakpoints directly from the CSS values in the DOM. This solution brings the current breakpoint variable into your JS in a way that’s:
- Simple & Lightweight
- DRY
- Compatible with all browsers that support media queries (IE9+)
See Lullabot article, Importing CSS Breakpoints Into Javascript
CSS Font Subsetting
In short, depending on what foundry/font provider you choose to use (ie. Google Fonts, Font Squirrel, etc.) you can be selective in terms of what glyphs you want to leverage versus calling the entire set of glyphs in one large request.
By being selective, you can craft a much lighter request by using additional parameters in your src.
The trade-offs are evident. This has to be applied to a set of glyphs that are more predictable to manage and which don’t change that often (ie logos).
It’s a very nickel-and-dimed approach in my opinion, but it’s definitely useful.
Thanks to, demosthenes.
WTF HTML and CSS
Common HTML and CSS miscues as explained by WTF, HTML and CSS?.
- Declare a doctype
- Box model math
- Rem units and Mobile Safari
- Floats first
- Floats and clearing
- Floats and computed height
- Floated are block level
- Vertical margins often collapse
- Styling table rows
- Firefox and
<input>buttons - Firefox inner outline on buttons
- Always set a type on
<button>s - Internet Explorer’s selector limit
- Position explained
- Position and width
- Fixed position and transforms
Thanks to, CSS Weekly #103 and WTF, HTML and CSS?.
Check Viewport Sizes
Here are some useful tools in evaluating the viewport size of various tablet and mobile devices:
nth:child CSS Selectors
CSS3 and IE7/8 versions of nth:child CSS selections,
/* standard nth */
ul.menu li:nth-child(3)
{
/* styles for the 3rd LI */
}
/* IE nth */
ul.menu>li + li + li
Thanks to, Michael Barrett @ Abouthalf.com