Below you will find pages that utilize the taxonomy term “css”
Modernizr 3: A beginners guide
UITableView in JavaScript, list view with re-usable cells using flexbox
If you’re familiar with iOS development you will know that a UITableView is very efficient when displaying a list of data. A simplification of what it does is display enough cells to fill the viewport plus a few more either side. As you scroll it re-uses cells that are now out of the viewport so a list with thousands of items will only ever use a fixed amount of cells. Highly recommend reading The fine art of UITableViews. Now this has certainly been done before in JavaScript, the best known project being infinity.js, but my approach takes an interesting turn, I avoid heavy DOM operations by using flexbox.
Continue reading.A follow up to obtaining 60fps scrolling performance
60fps scrolling article got quite a few people excited but also a few smart people to point out some flaws in the approach. I was planning to just update the original article but I’ve compiled so much info about this topic that I thought it would be better to do a follow up article and dive into the detail of the techniques that I tried and some solutions to the critiques made about the last technique.
Continue reading.60fps scrolling using pointer-events: none
Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.
Continue reading.Composited layers in iOS Safari bug
So had an interesting bug the other day where upon refresh, navigating to another page or external site within the same tab on iOS safari would cause some of my content to flash before the page was loaded. What’s interesting is the main layer over the top was a composited layer and the one beneath was not.
Continue reading.Extreme specificity overriding a CSS ID with 256 chained Classes
The other day Chris Coyier created a test case demonstrating that chaining together 256 classes will give it greater specificity than an id, in theory it shouldn’t. But in IE, Mozilla and WebKit browsers it does, Opera on the other hand upholds the specificity. Not familiar with CSS specificity then take a look at Estelle Weyl’s hilariously informative specifishity chart.
Continue reading.Curtain reveal effect using CSS
I recently redesigned my site and wanted to add a little fun effect at the bottom of the page (go on scroll down I’ll wait) that looked liked the whole website was sliding up and revealing a secret section under the footer and I wanted to do it without JavaScript.
Continue reading.A short Modernizr course
Last year, I did a quick 5 min presentation on some of the features available in Modernizr for Web Directions What Do You Know event. From there, Sitepoint & Learnable’s Kevin Yank asked me to put together a short course for learnable.com based on the presentation. So after working on the occasional weekend I put it all together and got it launched just before xmas 2011.
Continue reading.Handling high resolution sprite images with CSS3
The iPhone 4 has introduced a new challenge to web developers due to its retina display using a higher dpi than most devices. What looked sharp in desktop browsers and other lower dpi devices appears blurry and pixelated on the iPhone 4 and potentially other devices which will have higher dpi screens. The current solution is to have two sets of images one for general and one for high dpi screens. You then switch it up using media queries depending on the screens dpi, this has been documented and discussed many times. Let’s try a different approach.
Continue reading.Pure CSS collapsible tree menu
The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that works pretty well.
Continue reading.Futurebox, lightbox without the javascript and target pseudo-class
So I recently released a revised version of Futurebox which added a lot of functionality. But one thing was nagging me, the fact that it utilised the target pseudo-class to hijack in page anchors which has a few side effects that can create some major drawbacks to the technique. One being that if you click multiple futurebox links and then click the browser back button it will go through all the previous overlays that were activated due to the natural behaviour of in page anchors. The other drawback, clicking an in page anchor can cause the page to abruptly jump as it tries to bring the anchor location to the top of the page.
Continue reading.Is that a Speedo in your pocket?
Why yes it is…
I’ve been sitting on this little idea for a while and as a bit of fun I finally got around to putting it together and properly testing it. Basically on an iPhone with geolocation support (3.0+), I have set up a little web app that will get the speed from the GPS and move the speedometer needle according to your current speed in kilometres.
Continue reading.Custom radio and checkbox inputs using CSS
In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story.
Continue reading.Even better image preloading with CSS2
Recently I read an article on better image preloading using CSS3 which presented a clever idea using CSS3 multiple background images to preload images on one element as opposed to another method of having containers for each image. As of writing the support for multiple backgrounds is fairly sparse with webkit having the best support (Safari 3+ & Chrome 1+), Firefox is introducing this in the upcoming 3.6 release.
Continue reading.Futurebox, revisited
Earlier this year I unleashed futurebox into the wild. It got a whole lot more attention than I anticipated and I got some great feedback. Since then, I have been slowly working on a new version of futurebox which incorporates many new features.
Continue reading.Create the accordion effect using CSS3
Recently I have been playing around with CSS transitions and animations as implemented in webkit based browsers such as Safari and Chrome. They have been submitted to the W3C for consideration in the CSS3 spec so hopefully we should see more browsers support this soon, Firefox 3.5 supports CSS transforms which was developed by the webkit people to work alongside CSS animations & transitions.
Continue reading.Real text rotation with CSS
Just saw a great post on Jonathan Snooks’ blog about doing text rotation with CSS and how to accomplish it in IE using IE propriety filter basic image property to rotate a text block. But there is a better way using CSS3 writing-mode property that has been in IE since version 5.5.
Continue reading.Determine iPhone orientation using CSS
With the beta of Firefox 3.5 showcasing 35 new features over 35 days, the article on CSS3 media queries stuck out, the orientation detection really got my attention and immediately put my thought process to mobile devices, in my case the iPhone. I thought this is great maybe this has been snuck into the iPhone 3.0, unfortunately for us it wasn’t. That didn’t stop me and I got thinking about how it could be done if at all on the iPhone without using JavaScript.
Continue reading.Futurebox, lightbox without the JavaScript
I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox.
Continue reading.How to create offline webapps on the iPhone
Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache.
Continue reading.Advanced hover states using CSS
The hover pseudo-element in CSS can be a powerful tool in a front-end developers arsenal, it’s not only for changing a links colour. In good browsers the hover element can be applied to almost anything but unfortunately ie6 & 7 only support the hover selector on the anchor tag, but of course that isn’t going to stop us accomplishing something cool. I’ll be looking at using the hover pseudo-element to add some clever functionality when a user hovers over an image.
Continue reading.Don’t kill IE6, degrade it.
Buzz about the internet has been rampant this year with many claiming that this is it, 2009 will be the death of IE6. A campaign in Norway has declared war with some great success. There are now some high profile Norwegian sites following with a week long campaign to educate users on more suitable browsers they can use instead of IE6.
Continue reading.Sangraal layout: A true flexible, fluid CSS layout
The wait is over, finally a real ‘sangraal’ layout that ticks all the boxes:
- 3 column, 2 column, 1 column it’s all flexible
- Fluid centre layout
- No need for negative margins.
- Works in ie5+, firefox 1+, opera 9.6+, safari 2+, chrome
- Minimal mark-up & clean CSS
A look at pure CSS IE6 min-width solutions
As a large user base are still using Internet Explorer 6, with it’s extremely poor support for essential CSS, we as front-end developers need to come up with creative solutions to Internet Explorer’s limitations. One such limitation is the min-width property. In this article I will be looking at 2 pure CSS solutions each with their strengths and weaknesses.
Continue reading.Why display: table shouldn’t be frowned upon
I’ve seen a lot of commentary on the for, and against of using the CSS property display: table, a lot of it negative. It takes us back to the dark ages, using tables for layout. These people tend to forget that CSS is purely presentational and setting something as display: table is not the same as using the table tag. A screen reader going over a layout styled using the CSS table model will not get confused and muddled up. It will in fact breeze through a layout done correctly no matter which technique used floats or CSS tables. The display properties values: table, table-cell, table-row etc are named due to the fact its presentational result is that best described of how a table would work and the similarities end there.
Continue reading.