jslint.it

cssmojo.com

CSS

http://www.cssmojo.com/tags/css.html

Reuse or not reuse. I didn’t have much to do today so I thought I’d take that bait:. The very latest clearfix reloaded. Over 3 years ago I wrote " The very latest new new way to do clearfix. Before that, I had written " clearfix Reloaded overflow:hidden Demystified. On the YUIBlog. And here I am, writing about clearfix. Pure CSS Tab Panel. Most Tab Panel widgets rely on a list of jump links followed by "sections". These links are styled as tabs, while the sections are styled as panels. TL;DR: do not use.

cssmojo.com

Opinion

http://www.cssmojo.com/tags/opinion.html

What nobody tells you about will-change. TL;DR: do not use. Until all modern browsers are onboard with it (. Unless you know what you’re doing. Managing Stacking Contexts in a "hostile" environment. Note: this is a proposal I recently wrote for Yahoo! It has been edited for external audience. Common practices do not necessarily mean best practices. Google Fonts, Google Analytics, and performance. Onboarding Google fonts and analytics come at a price. Looking at perf results, I decided to drop both. It se...

cssmojo.com

Sprites without JS or min-device-pixel-ratio

http://www.cssmojo.com/sprites-that-are-pixel-density-agnostic

Sprites without JS or min-device-pixel-ratio. This post is about serving a Scalable Vector Graphics (SVG) file in lieu of a high-resolution image (@2x). It is an alternative to this:. MQ syntax from http:/ benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/ */. Or this (which relies on JavaScript):. Check the update section. If we check caniuse.com. For Scalable Vector Graphics. SVG) and Media Queries. For SVG as backgrounds,. It is the same as. IE 6 and 7*/.

cssmojo.com

A11Y

http://www.cssmojo.com/tags/a11y.html

Pure CSS Tab Panel. Most Tab Panel widgets rely on a list of jump links followed by "sections". These links are styled as tabs, while the sections are styled as panels. In [Designing an Effective Donate Form](http:/ bradfrostweb.com/blog/post/designing-an-effective-donate-form/) Brad Frost recommends using buttons in lieu of radio buttons, citing a [tweet from Luke Wroblewski](https:/ twitter.com/lukew/statuses/486521897367007232). Clip Your Hidden Content For Better Accessibility. This is about relying ...

cssmojo.com

Atomic CSS on Steroids

http://www.cssmojo.com/atomic-css-on-steroids

Atomic CSS on Steroids. This article was first published on (02-08-2015). We launched Atomic CSS last night http:/ t.co/V73TZFal0p. Learn how to use Atomizer and stop bloating style sheets :) #atomiccss. Mdash; Thierry (@thierrykoblentz) May 2, 2015. This is a quick preview of what we have in store for Atomic CSS. The video at the end of this article. Shows Atomizer in action - which is a very cool tool built by [@renatoiwa](https:/ twitter.com/renatoiwa). It also shows a. Or check this slide deck. This ...

cssmojo.com

Common practices do not necessarily mean best practices

http://www.cssmojo.com/think-for-yourself

Common practices do not necessarily mean best practices. This article was first published on (07-27-2014). This is a post about recommendations that I consider bad practices (I am less concerned by their methods than I am about their adoption.) This is my short list:. Using Conditional Comments to plug classes to target Internet Explorer. Using html 5 elements with a JavaScript shim. Using classes; never, evar,. Can do too, but. Is supported by fewer browsers. When it landed,. This styling is no silver b...

cssmojo.com

JavaScript

http://www.cssmojo.com/tags/javascript.html

Managing Stacking Contexts in a "hostile" environment. Note: this is a proposal I recently wrote for Yahoo! It has been edited for external audience. Below is a tweet I posted a month ago. It’s mostly a knee jerk reaction to a couple of experiences I had just had. It is easier for keyboard users to navigate through long nested lists (mainly navigation menus) when these are ". Through the use of. But unfortunately for these users, most web designers/developers choose other techniques to make sure all links.

cssmojo.com

Challenging CSS Best Practices

http://www.cssmojo.com/atomic-css

Challenging CSS Best Practices. This article was first published by Smashing Magazine. When it comes to CSS, I believe that the sacred principle of separation of concerns. SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching. And more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle. S excellent project CSS Zen Garden. CSS Zen Garden is what most if not all developers consider to be the standard. Followed by a div (.

cssmojo.com

Google Fonts, Google Analytics, and performance

http://www.cssmojo.com/google-fonts-and-analytics

Google Fonts, Google Analytics, and performance. TL;DR: without Google script and font. I had already chosen to do. Any JavaScript library on this site, but I decided to go one step further and remove the Google font and Analytics script. By doing this, I cut the HTTP Requests and Page size in half! Which made the page twice as fast (450ms vs. 989ms). See before. Results from webpagetest.org. If you look at those results you’ll see that I am not using a CDN. This is because using one.

cssmojo.com

Menus with a sliding marker

http://www.cssmojo.com/menus-with-a-sliding-marker

Menus with a sliding marker. This is a JavaScript-free solution to create a "sliding" marker next to or behind links in vertical or horizontal menus. Something called JQuery MagicLine Navigation. With an additional sliding bullet on codepen. And a horizontal version. At the bottom of this article. Make sure to read the update section. This solution relies on a. As we use the last item in the list to create the marker. This is truly ugly -. The logic relies on the general sibling combinator. This is our m...