pub-6887543428250003

WPMagic90

FIVE THINGS CSS and Web

CSS TRICKS

• 1. A Complete Guide to SVG Fallbacks | CSS-Tricks

"Here at CSS-Tricks, there’s a lot of information telling you how wonderful SVG is. And as much as we want to convince you that SVG is for Everybody, SVG isn’t as widely used as we would like. In fact, some people still (literally) don’t get SVG.

Maybe they are stuck on an office computer that hasn’t been updated since the IT guy quit six years ago, maybe they’re using a second-hand refurbished phone they can’t afford to upgrade, or maybe they just don’t understand or don’t care about updating to a new browser. Whatever the reason, approximately 5% of users browsing the web are doing so with web browsers that can’t display SVG—more in the USA (according to caniuse data)."

Some tech-oriented web sites (like this one) can afford to say that they only support modern web browsers. But for most sites, you can’t ignore 1 in 20 potential customers. If you want to give the 95% of users on modern browsers all the benefits of SVG, but still provide a functional experience for the others, you need a fallback plan.


Snook

• 2. Icons and Type – Snook.ca

As of late, I’ve been thinking about icons and type.

Here’s the example HTML I’m working with here:

<div><i class="icon"></i>cases</div>

Now, that div could be a button, it could be anything. That i could be an image, it could be an svg. Essentially, it’s something that is icon-like, set to display: inline-block. My goal is to center it next to the text beside it.


CSS TRICKS

• 3. Ignoring the in WordPress Queries | CSS-Tricks

Recently I had to make a custom WordPress query that listed post titles in alphabetical order. I started with a basic query like this.

PHP
$my_query = new WP_Query(array(
'post_type' => 'post',
'orderby' => 'title',
'order' => 'ASC'
));

My results were:

My Post Archive

All HTML Tags and Formatting
My Images
Text Alignment
The Average Post
The More Tag
The Paginated
Your New Post

The results are technically in alphabetical order, but not how I wanted. I wanted the word “the” to be ignored if it was the title started with that, and to alphabetize by the next word instead. The desired order should look like this:

My results were:

My Post Archive
All HTML Tags and Formatting
The Average Post
The More Tag
My Images
The Paginated
Text Alignment
Your New Post

The “the” is called an Initial Article. You know: “A”, “An”, and “The”, the thing that sometimes gets put at the beginning of proper nouns. If you want to go international you can include “La” (Spanish) and “Les” (French). After a lot of searching and combing through WordPress Codex, I couldn’t find a native WordPress WP_Query solution for ignoring an Initial Article.

What I did find were two very helpful filters that can let me achieve this, posts_fields and posts_orderby. With a little SQL know-how and PHP trickery. I was able to achieve the desired result.


Smashing Magazine

• 4. Notes On Client-Rendered Accessibility

As creators of the web, we bring innovative, well-designed interfaces to life. We find satisfaction in improving our craft with each design or line of code. But this push to elevate our skills can be self-serving: Does a new CSS framework or JavaScript abstraction pattern serve our users or us as developers?

If a framework encourages best practices in development while also improving our workflow, it might serve both our users’ needs and ours as developers. If it encourages best practices in accessibility alongside other areas, like performance, then it has potential to improve the state of the web.

Despite our pursuit to do a better job every day, sometimes we forget about accessibility, the practice of designing and developing in a way that’s inclusive of people with disabilities. We have the power to improve lives through technology — we should use our passion for the craft to build a more accessible web.

These days, we build a lot of client-rendered web applications, also known as single-page apps, JavaScript MVCs and MV-whatever. AngularJS, React, Ember, Backbone.js, Spine: You may have used or seen one of these JavaScript frameworks in a recent project. Common user experience-related characteristics include asynchronous postbacks, animated page transitions, and dynamic UI filtering. With frameworks like these, creating a poor user experience for people with disabilities is, sadly, pretty easy. Fortunately, we can employ best practices to make things better.


CSS TRICKS

• 5. Transforms on SVG Elements | CSS-Tricks

Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot of things don’t work the same way on SVG elements as they do on HTML elements.

For starters, CSS transforms on SVG elements don’t work in IE. Of course, there’s the option of using the SVG transform attributes for IE if we only need to apply 2D transforms on our elements.

However, all parameters for transform functions are numbers in this case, meaning we cannot control and combine units anymore. For example, we cannot use % values for translate functions (though % values wouldn’t work for CSS transforms in Firefox either, whether we’re talking about transform-origin values or translate() parameters) and all rotate or skew angle values are in degrees, we cannot use the other units we have available in CSS.

Also problematic is the fact that JavaScript feature detection fails (reading the CSS transform value via JS will return the matrix equivalent of the transform we have set in our stylesheet) so we either need another way to check for IE or we use the transform attributes across the board (which feels like less work overall).

The main thing that works differently between HTML elements and SVG elements is the local coordinate system of the element. Every element, whether we’re talking about HTML elements or SVG elements, has one. For HTML elements, this coordinate system originates at the 50% 50% point of the element. For SVG elements, the origin is, assuming we have no transform applied on the element itself or any of its ancestors inside the <svg> element, at the 0 0 point of the SVG canvas. This will cause different results following rotate, scale, or skew transforms if the 50% 50% point of the SVG element doesn’t coincide with the 0 0 point of the SVG canvas.