CSSA times, with little, do much. Optimizations that carry less than 5 minutes are often the ones leading to our room to the next level, improving incredibly usability and accessibility for our users.
Change the color of selected text
In Firefox, Safari and Opera can change the boring default color to something more in keeping with the colors of your site, which stand out more and help the display:
:: selection (background: # c3effd; color: # 000; / * Safari and Opera * /)
::-moz-selection (background: # c3effd; color: # 000; / * Firefox * /)
Prevent Firefox “jump” to show or hide the scrollbar
Firefox has a habit of showing and hiding the vertical scroll bar as if the contents of a page or not exceed the height of the window (the “fold”). In interactive sites with dynamic content that can change again and again, this effect causes an unpleasant jump. In the following way we can prevent it:
html (overflow-y: scroll;)
Apply rounded corners to containers
Besides being a pleasant change in Firefox and Safari, also helps to better identify the elements.
input (-moz-border-radius: 10px;-webkit-border-radius: 10px;)
Assign the page breaks for printing
Many people want to print the text of your website. Do not forget to order the items on the leaves by placing page breaks to avoid a sentence cut in half:
. page-break (page-break-before: always;)
To differentiate download links (eg PDF files) or external links. You decide.
a [href $ = ‘. pdf’] (padding: 0 20px 0 0; background: url (/ graphics / icons / pdf.gif) no-repeat center right;)
Change the cursor a pointer on the links and buttons
Important “detail” that many escapes them. Make the cursor becomes a pointer (the little hand pointing) to pass over buttons, clickable links and other elements greatly improve the user experience:
input [type = submit], label, select,. pointer (cursor: pointer;)
Make clickable entire area around the links
Seteando property “display” in block on the links (a, anchor) of a list, we will ensure that the user does not have to pose the cursor over the text specifically to click, but left the entire box Linquan container.
# navigation li a (display: block;)
What other quick tips your advice?