7 Quick CSS Enhancements for Better User Experience

Discussion

1. Bleyder

   Great tips!! Specially #2, #3 and #6
2. RaphaelDDL

   nice ones! i liked page break and below.

   Btw, #1 and #3 are not standards, so i might not recommend since people with Ie will see nothing :P
• Luke Jones

  There’s nothing wrong with a bit of graceful degradation. :-)
3. David Walsh

   RaphaelDDL: Right, but they are enhancements for those that can see them. There’s no negative affect for those that cannot.
4. Joost Kiens

   The button element and input type=”submit” don’t have a pointer/hand cursor in any browser I’ve seen.

   For some time I’ve been wondering why this is. It seems to make sense to have the cursor change on anything that’s clickable (radio buttons and checkboxes not included).

   I think the reason for this is that in a non-web UI the cursor doesn’t change when hovering over a button either.
   So, in that case, there might be something to be said about not changing this behaviour.

   If anyone knows more about this, I would love to know.
• Sunny Singh

  Problem is, this IS the web, and it really shouldn’t include the UI of the computer. This is why you should always style your buttons to match your site’s design. Some form elements are hard to style and it is acceptable to let them be, but you should still change the cursor to a pointer.

  Why? Well, it’s on the web and it’s clickable. Checkboxes and radioboxes should definitely be included in this as well. I think it’s good usability and gives the user feedback on whether something should be clicked or not.

  Imagine hovering over a text input, and not having a text cursor. Would you know that you could type there? Maybe, but it’d be less obvious. There are some good things to take from the UI of computer operating systems, but having the cursor stay the same is not one of them.
5. Wardy

   Nice tips.

   For the border radius, would it be worth mentioning about just putting just “border-radius:10px” as well, just to future proof the page?
• Ben Smithett

  I was going to suggest this too. The property without a vendor prefix should always be the last one in the list for when it’s finally a supported standard.
6. Lil' Peekr

   Great tips, and these little things definitely add up and help make for a better user experience…
7. eyeclipse

   Great usability tips :)
   An recently work with the corner radious effect aplied. It’s an example of how the design can adapt to the people who cannot view it:
   http://www.tvedu.org/
8. Riad Marrakech

   Unfortunately, IE is the most used in the world and some tips is not standard.
9. Denis Onichshenko

   It’s easy as that people with advance browsers will get extra features in term pursuading others to switch to a better standard complain browser (Webkit or Gecko based whatever). So we have to work for this small percentage ( not so small as it sued to be tho) so to ensure a better future :)
10. Alexander

    Excelent!

    Thanks!
11. Rick

    These would be even better if IE would die.
12. Adriaan

    Cool, I like items 2 and 5…now only to find a nice source for common mime type icons…do you perhaps now of one?
13. Luke

    I’ve always wanted to know how to change the highlight colour, thanks a lot for mate.
14. E. Serrano

    Great collection of tips!

    I would just add a little detail to #7 (block links) for main menu bars: add a little bit of padding to your links and you will have an even bigger sensible area very easy to click.
15. Chris Ruppel

    For the CSS Pointer Cursors, it would probably be better to define the label rule as label[for] since clicking a label only does something if its ‘for’ attribute corresponds to the ID of a form element on the page.
16. David Walsh

    @Adriaan: Good ole’ Google Image Search.
17. Jack Sleight

    Some good tips, though I have to say I disagree with “New rule for you to live by: if the user is meant to click on any element, it should have the ‘pointer’ cursor when the user mouses over it.”.

    Links, yes, always use the pointer, but not for selects/buttons etc. I dont belive the convention is “if you click on it you expect the pointer”, that’s not how the UI of any operating system I know works. IMO, the convention is much closer to “if it takes you somewhere (ie. a link) use the pointer, and if you’re performing an action (ie. picking an option from a list, submitting a form to update your account details) use the standard arrow”. Of course you could argue that a form using the GET method (ie. a search box) allows you to perform an action (search) and takes you somewhere (the results), but I still think the arrow would be more appropriate, for the sake of consistency.
18. Steph

    Do these work with IE7 & IE8 ? IE still hold over 50% usage for a lot of sites out there.
19. Kevin Mario

    Good post, I do have to remind you when you set overflow-y:scroll in Firefox, it disables the Page Up & Page Down buttons.

    Keep on rockin, Dave =)
20. Andy

    Attribute-Specific Icons

    What browsers does this work in?
21. Phil

    Awesome enhancements Dave.

    A couple of new ones for me in there. I think I’ll stick to class names for file icons though and the jury’s out on the use of pointer cursors for form elements – would most users not expect an element to be a hyperlink if the standard cursor becomes a pointer? I think I’m with Jack on that one unless I can be convinced otherwise!

    Kevin, which version/platform of Firefox are you referring to? It works fine for me in 3 on vista. Much more elegant than the traditional 100%+1px method too!
22. Benjamin Reid

    Great list but we’re still waiting on CSS3 for a few of those.
23. Mark

    I suppose I could just try this, but can you modify #5 to reference other attributes of the <a> tag? For example, using a[target$=’_blank’] to add an icon that indicates that a given link would take you off the page.

    (I know that _blank isn’t XHTML Strict, but honestly it makes far more sense to me than doing it with javascript, especially when you’re running a site where some of your writers might not have much HTML knowledge)
24. David Walsh

    @Mark: Yes, that’s perfectly fine (and I’ve done it before).
25. Chris the Developer

    Here’s a couple more:

    a {outline: none} – Links in navigation and image text replacement (negative text-indent) no longer have outline or outlines that run off the left of the page.
    If you want your headings to have custom underlines, or heading text to overlap the underline, you can set a background image on the heading.
    You can create some funky border effects on images by changing: padding, border, outline and background-color. For instance: img {padding: 2px; border: solid 2px #efefef; background-color: #e0e0e0; }

    So – that’s all I can think of now…
26. Duncan

    @ Chris the Developer
    If you want to remove the ugly outlines on your whole page at once, it is easier to put :focus {outline:none} in your stylesheet.
    That one is common used in reset.css stylesheets.
27. Chris the Developer

    @ Duncan – except that’s a pseudo-selector, so IE6 is out…Added to which – I don’t recommend you remove -all- outlines. Just the ones that don’t make sense. Leaving outlines on body-copy links makes sense, because it shows where your tab is. Same for forms.
28. Andy

    My understanding of outline is that it is an accessibility feature and so shouldn’t be removed
29. Chris the Developer

    @Andy – the only time I use it is when doing image text replacement (usually in navigation). In that case – it’s always the same CSS block that does both the negative text-indent and outline: none. If the CSS isn’t applied (for whatever reason) neither come into effect. As I understand things, outline is indicative of focus, which means that this shouldn’t affect screen readers either, but I could be wrong there…
30. FadiPick

    Great tips really!

    I have been working with CSS for couple of years now and never realized the selection highlight and rounded fields options before!!!

    Thank you David so much! :)
31. Jack Sleight

    @Chris the Developer – By the way, you can fix the outlines going of the left of the page issue by giving the links overflow: hidden.
32. balanza

    nice tricks but….. they mostly don’t work with IE
33. Five Minute Argument

    Some kind of styling on focus is essential for keyboard accessibility since it’s very annoying trying to tab through a bunch of links when it’s not clear which is ‘current’.

    I’ve always thought the ‘pointer’ cursor is great for labels as an aid to awareness; poorly structured sites have conditioned people not to even attempt making use of labels’ ‘click to focus’ behaviour. The pointer lets them know they can.
34. Pieter

    I actually hate it when people change the highlight colour on their website. It’s just a consistency that’s gone.
35. Rakesh Sharma

    A very clean and easy to understand. Thanks buddy.
36. Tracey Holinka

    CSS Pointer Cursors — great usibility tip. Thanks.
37. Oerknor

    Thanks for those great tips. Really helped me out.
38. David Walsh

    Pieter: I understand your point but the default text highlight color is usually horrid.
39. Five Minute Argument

    David, what OS are you using? In XP (and, I suspect, most other OSes) the default highlight is chosen from the global colour scheme, so it’s whatever you’ve set it to be. If it’s “horrid”, there’s no-one to blame but yourself! ;-)
40. David Walsh

    @Five Minute Argument: Thank you for being wrong in this argument. :) The default windows dark-blue highlight color is bad. Why not pretty it up?
41. Five Minute Argument

    @David: that’s exactly what I’ve done – through my OS colour scheme. For me, websites that don’t explicitly set a selection colour have selected text rendered in a nice shade of olive green.
42. David Walsh

    Five Minute Argument: Right, but I can’t tell my user to do that. There’s nothing wrong with controlling the selection color on your website.
43. derekbender

    Had no idea you could control the highlight color of the text! Super excited to use that now. Thanks
44. SelenIT

    if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it

    David, I’m very interested, what is this rule based on? Is it a kind of official usability/accessibility recommendation or just a common convention?

    As for me, the clickability of such elements as checkboxes, radiobuttons, select options etc. is obvious even with the default cursor. CSS2.1 and CSS3 Basic User Interface Module (both being Candidate Recommendations for years) state that the pointer cursor “indicates a link” (not “anything that’s clickable”!). And this makes sense for some advanced users. For example, if I see the pointer cursor, I expect that I can open the link in the new tab by middle-clicking, or drag-and-drop it into another program to send it to a friend. Is it really good to break these habits and to use the pointer cursor not in a W3C-recommended way?

    At last, cursor can’t be the only indicator that the object is clickable, because people usually don’t scan the whole page with the mouse searching for something to click:). Usually the clickable regions are already visually marked (by color and underline for links, by “a border surrounding it, often beveled to appear three dimensional, as if it is raised” — as CSS3 UI says — for push buttons, etc.). Of course, change of the cursor would help some users, but it would be misleading for some others. May be a short tooltip like “Click this box to…” would be more universal usability improvement in this case?
45. peter higgins

    for those wanting to follow the advice of the folks above who say “:focus { outline:none; }” and similar things, don’t. It breaks accessibility. Spend a little extra time and actually make the outline styles match your site styles if it really bothers you that much, but please, for the love of jebus, DO NOT take the ability away from vision-impaired users to use your site. very bad form, no matter how “pretty” you think it looks without them.
• Jeremy Carlson

  I thought the new thing was to style :focus the same way you would style :hover, therefore eliminating the border wouldn’t matter. I’m not familiar with what vision-impaired people go through, so is there something that the border does for them, that the same style from :hover wouldn’t cover?
46. Chris the Developer

    @peter – While an admirable notion, it’s not practical in today’s browsers, because of floating and layout and font replacement. Need to use an image and negative text-indent? Outlines run off the edge of the screen. Need to use float, negative margin and container padding to simulate a sidebar? outline extends the whole container width.

    You shouldn’t remove it off everything, but removing it where it makes sense, is a practical response to a real browser problem. Thank IE.
47. Dan Bookman

    I can’t believe how many people are arguing that sites should be the same on all browsers! I’ve been using almost every one of these on my sites for years. My idea is: The user should get an experience worthy of whatever browser they’re bringing to the table. To be clear, the site should function the same on every browser, but if the user has CSS3, a modern browser, or Javascript enabled, why not add embellishments?

    Oh, the rule I live by with the pointer cursor is: If you’re going to style the button or select in any way, give it the pointer. If you’re going to leave it the OS default, why change how they’re supposed to work? Don’t you think people are used to seeing their OS controls? Putting pointer on labels though, that’s smart!
48. RIchard Tape

    Excellent tips, David. I have to agree wholeheartedly with two of the commenters above, namely Dan Bookman (re: sites being the same in all browsers) and Peter Higgins (re: NOT changing focus due to accessibility reasons)

    Having done a lot of work for the NHS in the UK, I understand just how important screen-readers (and similar tech) are and the problems many websites cause them – not allowing :focus is one major issue — please, don’t do it, you really will be giving visually impaired people a major headache when it comes to using your site effectively. If you want to make your site more aesthetically pleasing then spend the extra 3 mins and define the correct styles in your stylesheet rather than scrubbing what is an essential usability tool.

    With regards to should a website be the same in all browsers, well… http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/ says it all quite succinctly.

    Rock on, David. Great post as always.
49. Abba Bryant

    Feel free to comment and correct me here, but from what little testing I have done with Jaws etc the outline property doesn’t do anything one way or the other when set or not with regard to screen readers.

    Removing the outline doesn’t prevent focus, and if you can’t see then why is there an issue if the visible outline is removed?
50. satrap

    Thanks for the post, i enjoyed reading it. blogging is not as easy as many think it is, it’s hardwork. any how thanks.
51. xrado

    i would add this one

    input[type=”text”]:focus,input[type=”password”]:focus, textarea:focus, select:focus { border-bottom-color:orange; }

    or maybe background-color …it’s helps find input you are focused at
52. PCNW κατασκευή ιστοσελίδων

    great tips, especially the Rounded-Corner Elements !

    Thank you
53. MarisaSAWYER21

    If you want to buy a car, you would have to receive the loan. Furthermore, my sister always takes a bank loan, which supposes to be really rapid.
54. Steven Schrab

    You can change the selection color? That’s hot!
55. Lucian Apostol

    CSS is so powerfull. I like when i see file icons before the download link.
56. Dan

    Strangely, in Chrome and Safari, just ::selection {..} doesn’t work.

    I had to add *, like this:

    *::-moz-selection { background:#cc0000; color:#fff; }
    *::selection { background:#cc0000; color:#fff; }
    
57. Dan

    This doesn’t work on FFX, I’m testing on 3.6: input { -moz-border-radius:10px;}
58. Trein naar Londen

    Love the rounded corner parts! blogging is not as easy as many think it is, it’s hardwork. Good comments also
59. Sunny Singh

    @Joost Kiens: Well if they look like as they would on the computer, I think it’s fine to leave the default cursor on but I still use pointer cursor on buttons.

    If you change the design however, the default cursor shouldn’t carry over so it’s best to set a pointer cursor on it, so users know that they can click it. In fact, I remember reading a help file in Windows 7 that you can click things that shows the “hand.” So anyone reading that will be confused when they don’t see a pointer on everything.
60. Soğutma Büyüsü

    Love the rounded corner parts! blogging is not as easy as many think it is, it’s hardwork. Good comments also
61. Ayirma Büyüsü

    A couple of new ones for me in there. I think I’ll stick to class names for file icons though and the jury’s out on the use of pointer cursors for form elements – would most users not expect an element to be a hyperlink if the standard cursor becomes a pointer? I think I’m with Jack on that one unless I can be convinced otherwise!
62. flxa

    For #3 probably should start adding border-radius as well just in case IE9 possibly starts accepting it?
63. Beben

    share knowledge in the beauty of argument ;))
    all is good if in accordance with the purposes and needs :)
    bye bye :-h
64. Royal Dragon

    Nice comment by Beben. Thanks for the suggestion flxa, IE9 is coming.
65. Parkeren Schiphol

    The Rounded-Corner Elements are magnificent!
66. Waterkoker

    Can you please ad live examples of the snippets… thanks :)
67. Amit

    Agree with waterkoker…an demo page would be good !
68. kosmima

    Demo will make our life easier. But we can try it our self, this will be more creative..
69. fotovoltaika

    Change Text Highlight Color is great i will use it to make the difference in my site!
70. Tabrez Ahmad

    Great highlight tip for the css. Just what I was after.

    However, this only works on my index page. How do get it to work on my other pages? For example my about page? I have one css file which is for all my html pages.

    http://visualcontinuity.co.uk/about.html

    Thanks in advance!
71. schiphol parkeren

    Believe that people are stil waiting for a demo?…
72. δερματολόγος αφροδισιολόγος θεσσαλονίκη

    I just try to “install” Change Text Highlight Color and works perfect! Thank you David
73. φωτοβολταικα συστηματα

    I want to find more colors to use text highlight.. Any suggestions?
74. Dsquared Jeans

    This post too really i enjoyed going through it with

    regards.
75. dsquared jacket

    This post too really i enjoyed going through it with
76. Eleni Varvitsiotis

    Demo will make our life easier.

    But we can try it our self, this will be more creative..

    thx

    Eleni
77. ανακαινιση θεσσαλονικη

    Thank you David i just made the test and it works great!
78. seomoneymaster

    i’ve been browsing on-line greater than three hours today, yet I never discovered any attention-grabbing article like yours. It is lovely value sufficient for me. Personally, if all webmasters and bloggers made just right content material as you probably did, the internet will probably be much more helpful than ever before
79. w3t

    except that’s a pseudo-selector, so IE6 is out…Added to which – I don’t recommend you remove -all- outlines. Just the ones that don’t make sense. Leaving outlines on body-copy links makes sense, because it shows where your tab is. Same for forms.
80. φωτογραφια γαμου

    I have notice that you change your website! Nice look keep up!
81. ασημένια κοσμήματα

    great tips , thank you
82. ασημένια κοσμήματα

    great tips , thank you
83. φωτοβολταικα

    Nice tips!!!!!!
84. Ayesh

    I was thinking there is no fix for the firefox’s bad habit until you let us know the trick at #2. Thank you very much :)
85. Arnold

    I just discovered you can also do attribute specific selectors to images:

    img[src$='.jpg'] { 
    	border: 2px solid red;
    }
    
    img[src$='.gif'] {
    	border: 2px solid green;
    }
    

    or get more creative and show a pre-loader as large jpg images load:

    img[src$='.jpg'] {
    	background:url('loading.gif') no-repeat 50%;
    	min-height:20px;
    	min-width: 20px;
    }
    
86. Κατασκευή ιστοσελίδων

    very useful information here

    I am glad to be a visitor of this pure web blog !
87. πλαστικος χειρουργος

    The cursors and the text highlight color are the best user experience!
88. Loren Helgeson

    Nice list. I’ve never heard of items 2 or 5, but I use the others quite regularly these days, especially since they are showing up more and more on websites.
89. Donna Cerca Uomo Milano

    I didn’t know that you could change the text highlight color … awesome list of tips
90. Peter

    I have tried the text highlight color and its custom with the colors i like for my site!