Treehouse

7 Quick CSS Enhancements for Better User Experience

By on  

The beauty in CSS is that a tiny directive can make a huge difference in how the page displays. Here are seven quick CSS snippets that will give your website more "pop" and make your user's experience more functional and enjoyable.

Change Text Highlight Color

::selection			{ background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#c3effd; color:#000; /* Firefox */ }

The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you'd like!

Prevent Firefox Scrollbar Jump

html { overflow-y:scroll; }

Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn't reach below the fold, thus creating an undesireable "jump." The above snippet prevents that.

Rounded-Corner Elements

input		{ -moz-border-radius:10px; -webkit-border-radius:10px; }

Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.

Print Page Breaks

.page-break		{ page-break-before:always; }

Don't forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.

Attribute-Specific Icons

a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.

CSS Pointer Cursors

input[type=submit],label,select,.pointer	{ cursor:pointer; }

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, buttons, SELECT elements, etc.

display:block Links

#navigation li a	{ display:block; }

When you've built a navigation menu with UL/LI/A elements, be sure to set each anchor 's display property to "block" so that the user doesn't necessarily need to hover over the anchor's text for the link to work.

So what are you waiting for? Get to it!

ydkjs-4.png

Recent Features

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • MooTools 1.2 OpenLinks Plugin

    I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips...

  • Rotate Elements with CSS Transformations

    I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations...

Discussion

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

  2. 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

    • There’s nothing wrong with a bit of graceful degradation. :-)

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

  4. 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.

    • 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. 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?

    • 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. Great tips, and these little things definitely add up and help make for a better user experience…

  7. 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. 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. 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. I’ve always wanted to know how to change the highlight colour, thanks a lot for mate.

  14. 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. 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. @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. 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. 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. 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. @Mark: Yes, that’s perfectly fine (and I’ve done it before).

  25. 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. @ 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. My understanding of outline is that it is an accessibility feature and so shouldn’t be removed

  29. @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. 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. @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. nice tricks but….. they mostly don’t work with IE

  33. 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. A very clean and easy to understand. Thanks buddy.

  36. CSS Pointer Cursors — great usibility tip. Thanks.

  37. Thanks for those great tips. Really helped me out.

  38. Pieter: I understand your point but the default text highlight color is usually horrid.

  39. 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. @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. @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. 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. Some short comments from my part:

    No.1 – Change Text Highlight Color:

    — This is fancy, but not too useful. I’d leave this at the browser’s/OS’s default color.

    No.2 – Prevent Firefox Scrollbar Jump

    — This short code snippet is useful. It also works with Opera and Safari, which is nice. IE6/7, by default, always display the vertical scrollbar (or rather, a placeholder for the scrollbar), so when you this code, you prevent horizontal ‘jumping’ of the content on the page in all major browsers.

    Just to add that (I am not sure why), sometimes I need to add another line, like this:


    overflow-y: scroll;
    height: 100%;
    </code

    ...so that it works in all cases...

    No.3: Rounded-Corner Elements:

    -- This is nice, works well with Firefox and Safari. Users of other browsers will simply see normal corners, but this is not a usability issue of some kind, so why not? :) Plus, I expect in a year or two, this new CSS3 property to work in more browsers...

    No.4: Print Page Breaks:

    -- If you expect a specific page to be printed, might come handy. But I never tested this, though... (maybe I should) I read on screen 99% of the time, and if I'd like to have a specific text to be printed with well preserved formatting, I'd rather go for PDF format...

    No.5: Attribute-Specific Icons:

    -- This one is really good! I've made a quick test, it looks like this code works very well in (at least): Firefox 3+, IE7, Safari 3+, Opera 9.5+. It doesn't work only in IE6 (but I didn't expect this, either...). Before, I preferred to use classes for such links, but now I see I can move forward and use this much cleaner and better CSS code, without the need for classes. Thanks! :)

    No.6: CSS Pointer CursorsМ

    I wouldn't agree on this one. A button is clickable but the browser is not showing a standard cursor for links (hand), but the normal cursor (arrow). And there's reason for that! So no need to change it.

    Only thing I might agree: labels. For labels, to show a different cursor, would be a good visual for the user, that he/she can click it and jump to the relevant form field. :)

    No.7: display:block Links

    No need to comment on this one. I think that nowadays all navigation elements (ul, li) are made of links which have display:block applied to them. This is sort of a standard now... :)

    Thanks for the article!

    For me, most useful was No.5, I think I'll test & use it soon! :)

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

  45. 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?

  46. 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.

    • 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?

  47. 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.

  48. 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!

  49. 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.

  50. 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?

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

  52. 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

  53. great tips, especially the Rounded-Corner Elements !

    Thank you

  54. 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.

  55. Steven Schrab

    You can change the selection color? That’s hot!

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

  57. 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; }
    
  58. This doesn’t work on FFX, I’m testing on 3.6: input { -moz-border-radius:10px;}

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

  60. @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.

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

  62. 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!

  63. flxa

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

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

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

  66. The Rounded-Corner Elements are magnificent!

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

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

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

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

  71. 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!

  72. Believe that people are stil waiting for a demo?…

  73. I just try to “install” Change Text Highlight Color and works perfect! Thank you David

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

  75. This post too really i enjoyed going through it with

    regards.

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

  77. Demo will make our life easier.

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

    thx

    Eleni

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

  79. 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

  80. 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.

  81. I have notice that you change your website! Nice look keep up!

  82. great tips , thank you

  83. great tips , thank you

  84. Nice tips!!!!!!

  85. 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 :)

  86. 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;
    }

  87. very useful information here

    I am glad to be a visitor of this pure web blog !

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

  89. […] 预加载整个页面 –> <link rel=”prefetch” href=”http://davidwalsh.name/css-enhancements-user-experience“ />    <!– 预加载一张图片 –> […]

  90. […] page, can also be a single resource, sample code is as follows: <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /&gt;    […]

  91. 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.

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

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!