I have bad eyes. Really bad eyes. So even though I wear glasses, often I find myself needing bigger fonts. On my Chromebook that means that I browse with the zoom set to 125% by default. And I’ve been noticing some bad things in your media queries. We need to talk about that.
But let’s talk about font sizes first. Or if you’re already up to date, jump to where I get to the point.
(more…)
Last week I got a complaint from a user on a site I work for: for a while now Opera Mobile’s “Single Column View” didn’t work anymore on our desktop site.
I had never even heard of the Single Column View, so I did some research in what it is and how it works.
For a while now I’ve been working with responsive webdesign, and I’m starting to really dig it. I’ve even gone back to some previously built sites that I still maintain and added some quick
media queries to them to make them a little bit more mobile-friendly. However, as often happens with projects that you run as a hobby instead of as a job, this very blog was still not ready for the smaller screens. It is now though!
So far I’ve added just a few basic rules in media queries based on where my site broke down when resizing the window (not on standard phone screen sizes, see this blog post). Over the next few days I’ll still have to tweak and fix some things and test on more devices (and especialy Opera Mini/Mobile) but at least I’ve made the first step.
Future, here I come!
Once in a while you’re forced to support Internet Explorer 7. Even though its share is only 1.29% for the site I’m currently working on, the amount of visitors is so vast that even that small percentage accounts for hundreds of thousands of pageviews per month. Which means we can’t just yet afford to drop support.
One problem I kept encountering was that of using display: inline-block. In all modern browsers this is supported, and often it’s a lot more useful than using floats. The problem once again though is IE7′s support for it. (more…)
Today I stumbled upon an article by ImpressiveWebs about the difference between :before and ::before in CSS3. I had wondered about this before, so the article was actually an interesting read.
In summary, the difference is that in CSS 2.1 pseudo-elements and pseudo-classes are both targeted using the single colon (:before). In CSS3 however, a distinction is made between the both, pseudo-elements now being prefixed with two colons (::before).
Why? Not sure, but as Louis points out the rule may have come a little too late anyway. Because a lot of pseudo-elements were already introduced in CSS 2.1, backwards compatibility will have to be ensured by supporting the single-colon version as well. Anyway, more about that in the original post: What’s the Difference Between “:before” and “::before”?
Not surprisingly, one of the comments implied (unless I misunderstood the speaker) not being able to actually tell the difference between a pseudo-class and a pseudo-element. This too is something I’ve been wondering about, but which I found the answer to a couple of weeks back. (more…)
I love WordPress plugins. In fact, I love them so much that on one of the websites I’m currently working on I have 26 plugins activated and more will be added in the foreseeable future.
One downside of plugins however is that a lot of them come with CSS and JavaScript, which have to be incorporated into the theme at some point to get the plugins to work. This often means an extra request for a .css file and/or .js file is added to the theme’s <head> tag. This, of course, is bad practice: you should try to make as little HTTP requests as possible to keep your site up to speed, put your javascript in the bottom of the page to ensure faster rendering, and it also gets real tough to maintain all those separate files if many things have to change (like styling the plugin’s elements).
Gladly, WordPress offers ways of disabling the CSS and JS files that are added by these plugins. I’ll elaborate on how the adding and removing of both works. If you already know or don’t care and just want the script, just jump to the final code now. Let’s take styles for example, and look at how these are disabled. (more…)