Make your website feel more luxurious using a simple CSS trick. A cover image for “The CSS hack that extends your website on iOS Safari” Introduction People who read a lot of books know that paperbacks get read faster, they get shoved into backpacks, they get dirty and folded around, but they sure enough get read. In contrast hard cover books are more luxurious, they are for a reader who wants to take his time, to enjoy the reading process. Hard covers get read at night in bed, or by the fireplace. When a hard cover book is finished, when it’s all read and done, it still looks like new, and that’s why they are more sought after by collectors and enthusiasts alike. Your website can feel more luxurious too, like a hard cover book, by using a simple trick, that only iOS users will see, you can change the color of the bit that extends to the top and bottom, you can decide, with simple CSS tricks — to delight your mobile users. The Nature of Code / Daniel Shiffman (2012). Notice the pink border all around, that’s the magic of hard covers. And like a good hard cover, your users will feel it, you don’t want your users to come to your website only for the content — like a cheap paperback. Your website should be an experience, not just data. Simple Safari website extensions A simple iOS Safari website extension What we are talking about here is how iOS Safari will extend your website at the top — behind the status bar, and at the bottom — behind the tab bar. In the image above you can see what you get if you do nothing, by default iOS will extend your content to the top and bottom. Where your website ends, like above the header and below the footer, Safari will just extend your website’s body background-color , which is white by default. If your website has no explicit body background-color , it can also be inherited from the html tag itself, though I think it’s simpler to just add a body background-color. Here’s the CodePen Demo (See the code): Simple iOS Safari And the Pre

• Description is available (+5)