1. clip
clip: rect(5px, 40px, 45px, 5px)
From iBloom Studios
A good way to visualize the clip attribute is if you take a piece of paper with a rectangle cut out of it and place it on top of a photo (just like using a Photoshop layer mask). The area of the rectangular hole, allowing the layer behind it to show through, is what the clip property will specify.They've got a lengthy article all about clip and some examples of it in use.
2. visibility
visibility: (inherit | visible | hidden)
From Macromedia
For practical purposes, the difference between these two properties [visibility and display] is that when you hide information using the visibility property, the browser creates the appropriate amount of space in the browser window for the information when the page loads. When you use the display property, space for the information is not created until the element becomes visible.
3. text-shadow
text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px
From Quirksmode:
The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text.
4. content
content: "Your browser supports content"
Use this property with the :before and :after pseudo-elements to generate content around a CSS selector.
Careful with this one, it goes against the idea of separating content from presentation. From quirksmode:
I feel that we shouldn't use theI agree, but there are still some cool things you can do with content using CSS. Check out Curly Quotes from Design Meme.content
declaration at all. It adds content to the page, and CSS is meant for adding presentation to the page, and not content. Therefore I feel that you should use JavaScript if you want to dynamically generate content. CSS is the wrong tool for this job.
5. quotes
q { quotes: '"' '"' }
From htmldog
[quotes] specifies what form the quotes of theA List Apart endorses the revival of the <q> tag using contentopen-quote
andclose-quote
values of thecontent
property should take. Not supported by IE.
6. counter-reset and counter-increment
From the mozilla developer center
CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed
on a page using thecounter()
orcounters()
function of thecontent
property.
body {
counter-reset: section; /* Set the section counter to 0 */
}
h1:before {
counter-increment: section; /* Increment the section counter */
content: "Section " counter(section) ": "; /* Display the counter */
}
7. marks
@page: { marks: <value>; }
From quackit.com
The CSS marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.
8. page-break-before and page-break-after
page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);
These two properties allow you to set the page-breaking behavior of an element when printing the document.
From MSDN
The following examples use the page-break-before attribute and the pageBreakBefore property to start printing on a new page.
This example uses the H3 element as a selector in an embedded style sheet to break the page before all H3 headings.
<STYLE>
H3 { page-break-before: always }
</STYLE>
</HEAD>
<BODY>
<H3>Start New Section on New Page</H3>
9. orphans and widows
orphans: <integer>
widows: <integer>
These two properties are used primarily in paged media to control line breaks by specifying the number of lines in a paragraph that should be left at the top (widows) or bottom (orphans) of a page.
About.com has a decent article about the CSS orphans property.
10. font-size-adjust
font-size-adjust: number
From w3schools:
The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of 0.46. This means that Verdana is more legible at smaller sizes than Times New Roman.
The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first-choice font.
11. font-stretch
font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)
From the W3C
The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
12. font-variant
font-variant: (normal | small-caps)
From w3schools
The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.
13. caption-side
caption-side: (top | bottom | left | right)
This is used to define the position of a caption in a table.
14. table-layout
table-layout: (auto | fixed)
According to Quackit.com
The CSS table-layout property allows you to fix the table layout so that the table renders much faster.
Without the table-layout property, on large tables, users won't see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker.
15. empty-cells
empty-cells: (show | hide)
Quirksmode has a great explanation of empty-cells in Fun with Tables: which shows a side-by-side comparison of a bunch of CSS table properties and which browsers they are supported in.
Any other long lost CSS properties you can think of?
font-size-adjust does not work properly in mozilla and opera
Good reminder and I have no idea of 50% of the properties till now. Thanks for the article.
Yeah the only one that's pretty tempting is visibility. i do use that sometimes. for instance, i used it on www.thumbwarz.com to prevent the footer from displaying before it had been positioned
It's a nice list, though I too would be hesitant to use some of these since I think a certain browser developers all know and dislike doesn't handle them well.
The property I'm wanting IE to adopt more than any other is the border-radius property. It's css3 I think so we may be waiting. That one property is going to eliminate a lot of needless images and open up web design in many ways.
Wow...you actually found something useful at about.com???
I would have never expected that.
Very informative post though...Now I'll have to go change stuff around in my CSS.
I've never really had any problem with about.com. Then again, I don't use it very often. I mostly go there for recipes and exercise information. When I was researching the orphans CSS property, about.com appeared to offer the best explanation.
Yikes, I have lost this comment twice now! (grrr.. site not working in Opera!)
So, anyway, what I was going to say is that most of these properties don't work in all browsers so that's why people don't use them! Really this is a list of properties we might be able to use in the future but probably not now becuse they're not supported well enough.
It is nice to know about them though. I have done some work with generated content and the :before selector. It was really extra decorative stuff so it doesn't matter to me if it doesn't look exactly right in IE. I also did some stuff with counters quite a few years ago but back then they were only supported by Mozilla. It's easy to forget about things when you can't actually use them on a real site.
I will have to play with some of these when I get a chance, especially the print stuff. That's something most of us don't pay enough attention to, I'm sure! This list would have been more helpful if the supported browsers were listed for each property :)
Is font-stretch supported by any browsers at all? This article from Stylegala says that it's not, but I'm not sure how old that is. I guess the only way to find out for sure is to test :)
Hey Megan, if you're having trouble with the comments you should try changing your account settings to disable the javascript wysiwyg editor.
Thanks a lot! It mostly works fine, it just lost my post when I went back up the page to check the article again.
Great list Matt. One thing I would add is a warning: not all of these attributes are supported in all browsers and even the ones that are may not do the same thing accross the board. Test everything.
Also, why would you link to about.com? That site gets too many SERPs as it is IMO... and usually not "quality".
Thanks rmccarley, I actually made note of that in the opening paragraph.
Doh! I glossed right over it.
I found this awesome too. I know one great site with css tutorials (it's php tutorial https://phpforms.net/tutorial/tutorial.html) so I can easily customize them.
css rules!
greatness again... thanks for your time in compiling this for us!
I just discovered a new one today that I'd never heard of:
white-space
You can use it to adjust how white space is handled, possible values are normal, pre, and nowrap.
https://www.w3schools.com/css/pr_text_white-space.asp
I just ran across this list. It's a good resource for the future but I agree with most here that it's not wise to use over 60-70% of them if you want cross-browser compatibility.
It would be really nice to have browser support listed for each item!!
One thing I'd love to see added, is a browser check. Everyone who finds this interesting will be thinking "Sure it's cool, but probably only works in 1-2 browsers".
Awesome article though, I'll defenitely look into it.. Bookmarked. Thanks alot!
Nice, I've always wondered what some of these CSS properties did and how to use them.
Excellent little roundup :)
I'd just like to mention that I didn't post this entry with the intention that everyone should go use all these properties on a production website. I'd never heard of a lot of these forgotten properties and thought it would be interesting to offer a little information about them.
Interesting list. I really liked the 5 HTML elements too. I just wish these were more widely supported!
It's fun to think of what should or might be when it comes to CSS design possibilities. Early on I actually hoped that Firefox 2 and IE7 would encompass wider CSS supprt, but now I think suspect that many of the elements you mentioned will be dropped from future CSS specifications.
Great list, but I would add, if I may: "TEST, TEST, TEST!". Make sure that all leading browsers (IE, I'm looking at you) interpret your CSS as intended. Also, test on all relevant platforms - PC, Mac, mobile, etc..
<a href="https://www.fadilahnet.com/2016/08/06/ini-dia-perbedaan-letak-kancing-kemeja-pria-dan-wanita/">Fadilahnet.com</a>
Really nice stuff, worth a bookmark :)
Man I would really like to know how this went from next to nothing for Digg's at around 5 CST to over 1600 when I got to work today...
Not in any way that it is a bad article, I just don't understand that site quite yet. Any thoughts that can be provided on that note would be great.
I have no idea. All I know is that getting on digg frequently coincides with me NOT being near a computer, effectively killing our server and me not knowing about it. Yesterday I was at the computer all day (9am - midnight, basically). I left for about an hour to go exercise and during that hour we got on digg.
I guess what I'm saying is that I've rarely seen a consistent pattern to getting on digg. Sometimes it happens in less than an hour, sometimes it can happen days later. The guys at pronet might have a better explanation for how it all works.
Hey, are you caching at all for the site? Everytime your articles make Digg, SEOmoz crashes (which drives me nuts).
This happened to me the first time I got Dugg and my lack of caching was at fault - db was being queried every single time. Since I fixed the caching issues it's been smooth sailing ever since.
Kudos for the frequent diggs, btw.
Yeah, we are caching but I haven't gotten it's not entirely automated at this point so I have to set up which pages are cached beforehand. Unfortunately there's very little rhyme or reason to when a post makes the digg homepage, so if Im not paying attention our server crashes.
I apologize, I'm trying to find a long term solution.
one thing that may web designers like to implement are round corners on content blocks. I have had mixed results with an all CSS method for this. IE (as usual) has problems displaying complex CSS consistently.
Below is a good tutorial for making round corners without images.
https://www.html.it/articoli/nifty/
I'm not a big fan of rounded corners, not necessarily because they're difficult to implement but mostly just because they're a bit overdone, imo.
Just came across this one by Stumbling - great stuff. I am sure there are many problems we could solve via these variables.
Very good article ! I want to use text-shadow on my new website, but it works only in Chrome so far. Explorer and Firefox make no shadow. Still very useful tips. Thanks.
Very good article, CSS to search engine is very good.
I have several of these useful. Thanks for reminding us.
One of my favorites is opacity. You can get some cool effects by
adding opacity on hovering an image against a colored background.
It's well supported. Even IE has its own version that works identically.
Great list Matt. Regardless of if or if not these things work across all browsers I still think these are great tricks to know. I’m sure not too long down the road there will be some kind of web standards set that will eliminate all this cross browser commotion…
Um, most (all? will have to check) of these are standards set by the W3C. It's just that one or more browsers don't support them yet. Will that one browser ever catch up to the rest? That remains to be seen. Browsers are always trying to catch up to the standards - this article is mostly looking ahead to what may be usable when browsers catch up.
I have only heard of a few of these, and have used even less. However #8 (page-break-before and page-break-after) have come in handy for me when generating html based forms, invoices, and labels.
visibility
page-break-before
table-layout
Congratulations by the post!
I enjoyed the list and article a lot, so thank you but really I would only ever use two or three of those properties and they would be:
Font-variant, quote (normally use blockquote though) and table-layout...
Thanks for the article though
You are gay, There is a reason we don't use these. Because they all suck. Just like I sucked your mom last night. Learn some real css and try not to say something that hasn't been said a million times before.