Reflecting on CSS3…

August 30th, 2010 Posted in browsers, iPhone
No Comments

CSS3 Image Reflections have been around for quite some time. Back when I was parsing out the iTunes website to get the latest statistics, I came across my application’s image without the reflection, shadow or other styles which made my icon really pop. This of course made me wonder how they were doing it without changing my app’s image, since of course I assumed they changed the icon after it was uploaded to their servers. A little more digging showed me that there was a CSS transformation that I had never seen before, and it was one of the first real powerful CSS transformation that I personally viewed.

A co-worker pointed me to this article today, which is an extremely simple reflection, and shows this technique very well. Since I had yet to create an article for my own reference, I’ve added it in here…

-webkit-box-reflect:
/* above|below|left|right */
/* pixel value start offset from image */
/* http://webkit.org/blog/181/css-masks/ */

A sample usage of -webkit-box-reflect looks like:
.reflectBelow {
-webkit-box-reflect: below 0
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}

Unfortunately, if you are not using a WebKit based browser (iPhone/iPad/Safari/Chrome), you will not see the reflection. The bonus however is that you see how the reflection reacts to not being displayed – it degrades very gracefully, as it should.

Read More

Refreshable Braille and the Web

June 29th, 2009 Posted in browsers, design
No Comments

Refreshable Braille and the Web came up as a search result when I was looking for CSS language accessors and IE. While it’s not what I was looking for, I took a few moments and watched the video. I know there are screen readers out there, as well as language translators and more, but this was very compelling to me. I did not know that there was a braille reader which is essentially either a keyboard or an attachment to a keyboard which allows the reader to read just as if they were reading a book. Instead of reading lines of braille, there is a single line at a a time which is available.

Articles like these remind me of why great HTML markup is SO VERY important to accessability, and forward thinking. One of the points which is made is that the HTML outline is used by the screen readers to not only describe where the reader is, but also describes the importance of that information which is being read. Ironically, I do not believe I have ever worked for a company which specifically targeted their audience which may require the accessability standards which are now in place. Just like you and me, people who need the accessability standards work, shop and play online. It is important to make sure that we test not only for the vast majority of our users, but we also test for those who may need that extra little push of our time at the end of the day.

I hope that you find the video as compelling as I did.

Read More

Firefox 3.5 – Fonts, clean and crisp

June 18th, 2009 Posted in browsers
No Comments

Something that I have been detesting is how my sites have been looking in Firefox under Windows. I know, I know, you deal with these things for security, etc. But I looked at Safari, and the fonts were always clean and crisp… So what gives?

I found an article relating to @font-face css rules, read it in Firefox 3, and then decided to look at the same page in my VM instance of Firefox 3.5. The difference was staggering, and yet very slight. Firefox 3 looks very grainy and even pixelated where Firefox 3.5 looks crisp, like an Arial font should look. I start looking at the author’s CSS (yes, I’m a nosey person) and realize that they’re not actually using @font-face styles on their page! So I looked around the web a little more, comparing the pages side by side just to find that wow, the experience may not bring me headaches any longer!

For me, this one little thing is a huge win. I look at Firefox every day during my development cycle and to be able to see the fonts just as I would in any other application is frankly awesome. This is something that I expect, and it was a disappointment before. I am very glad to see that Safari has taken up the challenge of being innovative and improving the user experience on the web. Other browsers like Firefox are now catching up, and for those of us who develop applications for the web, and those that use our applications, this is nothing but WIN!

Thank you Mozilla – for something so simply pretty. Thank you WebKit for making the challenge happen.

, ,
Read More

Are you afraid of Shadows? Part 2

June 17th, 2009 Posted in browsers
No Comments

Back in March, I asked the question: Are you afraid of shadows?
In the article, I showed off some really neat transformations which at the time, were only available to Webkit users (Safari and Google Chrome), and the users of the early beta release of Firefox 3.5 (at the time Firefox 3.1).

The little things like text shadowing, which you really wouldn’t think much of unless you look at the power of the iTunes stores.  The iPhone App Store in iTunes, much like all of iTunes is simply a web interface to the database of apps available for purchase, but if you’re a developer, you’ll notice the sweet effects that are laid on top of your app icon.  Being both a developer and a web developer, I was curious how they went about making that happen automatically.  My first thought was that they modified the image, but that wasn’t the case, it’s all CSS transformations which have been submitted for addition to the CSS 3 recommendation. Take a look at some of the documentation Apple has to offer

So now one must wonder if Internet Explorer will try to catch up[1], or if we will continue to require our web developers to handicap the abilities and speed of their websites just to appease the MANY users of Microsoft’s always behind browser. With luck, we will see Internet Explorer 8.5 which will add many of these abilities, and allow even the most novice of users to see the best that the web has to offer, but until then, those users will look upon the web with unseeing eyes. Ironically, once Internet Explorer does catch up, the world will be amazed at everything Microsoft has brought to them, never to realize that these things had been available for years before.

1 – To be fair, Internet Explorer does have this functionality, but it is something that must be handled in javascript, or by other programmatic means in the stylesheet, and is not the cross-browser way to handle this functionality.

Looking for more specific information? Try Firefox 3.5 for developers at Mozilla.org.

Text Shadowing availability by browser:
Safari 3 & 4
Firefox 3.5
Chrome 1

Have I missed a browser like Opera? I don’t run it and am not required to test against it, so if you know of other browsers that support the latest CSS let me know and I’ll add them to the list!

, , , , ,
Read More

Are you afraid of shadows?

March 13th, 2009 Posted in browsers, iPhone
3 Comments »

Have you ever wondered how iTunes manages all those cool effects with the iPhone App images? The neat text shadows and box shadows for images, the curved corners… I thought it was something they were using an image tool for, but the more I looked at the feeds, the more I noticed that the the feeds were just that, straight text with not a lot of graphics. Yes, the app image is an image, and yes they are manipulating it, but does it surprise you to know that they are simply using CSS3 effects that are available in WebKit?

I was going through styles at the end of my work day today because our pages just look so bland. I was looking for easy ways to spice it up, even just a little. I started playing with shadows, and instantly fell in love. I made the title of the page look like it was popping out of the screen, and the boxes appear above the page. These were VERY cool effects, but they would only be available to webkit browsers – Safari on Windows and OSX, and on the iPhone and iPod Touch – pretty much anywhere if I understand the documentation correctly.

And that’s when it hit me. Isn’t Google’s Chrome web browser based on WebKit too? So I open it up to the page I was testing and wow! My shadows all worked wonderfully!

I was upset because I know FireFox 3 does not support shadows, but then found a reference to FireFox 3.1a saying that this will be the first version that allows for the shadows. About time I say!

But here we are, supporting an 8 year old browser which will never support these cool effects. I even looked to see if IE8 will show the text shadowing, and even though it’s in RC1, it does not support text shadowing. Maybe that’s why there’s word on the street that IE8 will possibly be the last version – which I’m sure only means for the engine, which is already out dated before launch since it does not support many of the visual effects that WebKit does, which really amounts to the coolest browsing with the least overhead.

With any luck, the tide will turn, and we will be able to produce more and more rich web applications, with eye-popping effects by simply using CSS. Here’s to hoping!

, , , , , , , ,
Read More

Open Directory Project and Google Search Description Snippets

March 2nd, 2009 Posted in Politics & Economics, SEO, browsers
No Comments

SEO is a big thing, this much everyone knows. But some people still don’t know the importance of great descriptions, or how to get those descriptions into places like Google and other search engines. I started re-researching the various meta-tags available, and came across a new one that I didn’t know about – NOODP. I didn’t understand why this was important until I did some research, and found that Google will pull the Open Directory Project (ODP) description for your site if you do not specify one. Well, that’s handy! But what if I don’t want every page on my site to use the ODP description? That’s where this handy article comes into play:

One source we use to generate snippets is the Open Directory Project. You can direct us not to use this as a source by adding a meta tag to your pages.

To prevent all search engines (that support the meta tag) from using this information
for the page’s description, use the following:

<meta name="robots" content="NOODP">

To specifically prevent Google from using this information for a page’s description, use the following:

<meta name="googlebot" content="NOODP">

If you use the robots meta tag for other directives, you can combine those. For instance:

<meta name="googlebot" content="NOODP, nofollow">

In short, these meta-tags should be used when you have a page specific description you would like to show on the search engines.

For more information, check out the Google answer here: Changing your site’s title and description in search results

, ,
Read More

You should upgrade to IE7

January 28th, 2009 Posted in browsers
No Comments

This text was found when browsing using IE6 – I loved it and wanted to share it with you! Found on Click Forensics

Your are currently browsing this site with Internet Explorer 6. When it was released in August of 2001 Internet Explorer 6 was a cutting edge browser, unfortunately after nearly 8 years the technology behind Internet Explorer 6 has lost its luster. Internet Explorer 6 lacks many powerful features and security enhancements of modern browsers. It is also very poorly lacking in standards compliance which means it’s simply unable to render sites properly without hours of hacks and workarounds.

The last version of Internet Explorer 6 was called Service Pack 1 for Internet Explorer 6 and was released in December of 2004. By continuing to run Internet Explorer 6 you are open to any and all security vulnerabilities discovered since that date. In October of 2006, Microsoft released version 7 of Internet Explorer that, in addition to providing greater safety in navigation, which allows the Internet Explorer browser to identify as’ modern browsers’. Microsoft has launched Internet Explorer 7 as a high-priority update, and is now available to download for free without any certification requirements. As of Feb 12th, 2008 Microsoft is forcing updates to Internet Explorer 6 in order to move people towards the much improved and secure version 7. Please ensure you don’t hamper this process. It’s for your own good!

Download Internet Explorer 7 NOW!

Just another great reason to take the leap away from IE6 — if you can. Is there a version of IE7 for Win2k users?

, , , ,
Read More

Debugging with Firebug

January 23rd, 2009 Posted in browsers
No Comments

Cool article to print out and keep handy on debugging using Firebug. Sadly, I’ve still been using Alert. Call me dinosaur, but it’s worked for me — but I’m trying to change that!

This code snippet will help out with browsers that do not have a console function 

var console;
if (console == undefined)
    console = new function()
    {
        this.error = function(src) { alert("Error ---\n\n" + src); };
        this.log = noop();
    }
,
Read More

Cross Browser DOM Ready

January 23rd, 2009 Posted in browsers
No Comments

This is an interesting post about cross browser DOM Ready…

Reinventing the wheel, cross browser DOM ready

There are different techniques to have DOM ready functionality. Some techniques are faster,smarter than the other (or a combination of both). Having it working in various of browser has always been an issue, with HTML 5 they introduced a new event called DOMContentLoaded.

Its a great step to have cross browser DOM ready functionality, but there will always be browsers who doesn’t have this implemented *cough* Internet Explorer *cough* and also the older browsers that some people are still using. So I think it will be safe to say that we can use the DOMContentLoaded completely crossbrowser in the year 2020…Read More

What he’s come up with is very interesting, and for high intensity sites, could be a huge boon.

, , ,
Read More

Hiding and showing scroll bars with JavaScript

January 21st, 2009 Posted in browsers
No Comments

Have you received a requirement that says “We want to see this many elements before you add a scroll bar, we don’t care about the height of the elements, just the number”? If you are using YUI, there is a VERY easy way to handle this! YUI has the following 2 CSS classes which you can add either through javascript or other server side language:

show-scrollbars
hide-scrollbars

The CSS for this is VERY simple:

.hide-scrollbars,.hide-scrollbars * {
    overflow: hidden;
}
.hide-scrollbars select {
    display: none;
}
.show-scrollbars {
    overflow: auto;
}

Now you have scroll bars on command through any language. Using YUI, implement this by addClass, and in Spry, addClassName.

<div class="myBody">
    <ul>
        <li>List of stuff 1</li>
        <li>List of stuff 2</li>
        <li>List of stuff 3</li>
        <li>List of stuff 4</li>
    </ul>
</div>

<script type="text/javascript">
   YAHOO.util.Dom.addClass("myBody","show-scrollbars");
</script>

I’m using the div id “myBody” as text above, but the function also accepts an array of elements, or a single element. You can also wrap addClass into a function that decides when to show or hide the scroll bars.

, ,
Read More
Older Entries