13 ms·
Three CSS features you need to know about
- moonlighter 14y agoattr() seems incredibly useful, and calc() nicely augments static calculations provided by LESS CSS et al. I'm definitely going to use these.
- geuis 14y agoTo those using calc(), WebKit requires -webkit-calc
- james4k 14y agoYeah.. I'm on Chrome 25 and was disappointed to see this.
- silverlight 14y agoIs calc() performant in modern browsers (IE10, Chrome, Firefox)? I got scared off of it a few years ago when it was first announced because I read that the performance hit was very noticeable...
- rickyc091 14y agohttps://developer.mozilla.org/en-US/docs/CSS/calc#Browser_compatibility https://developer.mozilla.org/en-US/docs/CSS/calc#Browser_co... Looks like calc is supported in Chrome 19+, Firefox 16+, IE9+, Safari 6+.
- mcrittenden 14y agoHe/she was asking if it performs well, not if it is supported.
- deleted 14y ago[deleted]
- markdown 14y agoNot in Chrome for Android though.
- paulirish 14y agoThere's no perf hit. You're fine. (IE Expressions however, had a big perf hit)
- donutdan4114 14y agoHow have I lived without calc() for all this time?....
- GhotiFish 14y agoNo kidding. The nightmare I went through trying to make a fluid CSS layout with more than one column. My god! The time I wasted! Arg!!!!!
- masklinn 14y agoThen again, ideally fluid layouts with multiple columns would use (ta-daaa) columns: http://caniuse.com/#feat=multicolumn http://caniuse.com/#feat=multicolumn
- marvwhere 14y agothats the same question i asked me right now too :D always these problems with width and 100% - i def. give it a try in the next project!!
- emp_ 14y agoThe true question is, why were we forced to stop IE's box model which was great and made sense to only now have a half-available box-sizing: border-box attr.
- iamben 14y ago-moz-box-sizing: border-box; -webkit-box-sizing: border-box; ...is a great alternative to the calc example - ie Set your width to 100% and your padding to 100px. Edit: code is a little mangled, just Google it.
- stan_rogers 14y agoBox-sizing should be supported unprefixed as well (recent versions of IE, Chrome, FF and Opera; not sure about the current Safari).
- eurleif 14y agoAnd you should add the unprefixed version of a property to your CSS even if it isn't yet supported by browsers, to future-proof your code.
- masklinn 14y agoUnless the spec is still in flux and the unprefixed syntax changes, then you're SOL.
- eurleif 14y agoStill better to have the unprefixed version in your code than not to, I'd say. I really doubt the spec would change so that old code was still valid, but had a different meaning; most likely, the worst that would happen is old code would become invalid (and CSS's error handling makes invalid code not a big deal).
- tagawa 14y agoAnd put the unprefixed version below the prefixed properties, so it has priority in browsers that support both.
- iamben 14y agoSorry - unprefixed version was there, just removed when I pasted it in (hence my mangled code edit!)...
- buu700 14y agoI've found attr() useful on occasion, but I can't believe that I've carried on for so long assuming the only way to subtract pixels from percentages in my styling was to use JS. As an aside, is Aptiverse in YC? If not, the logo could potentially be a case of mild trademark infringement.
- WiseWeasel 14y agoI'm also excited to learn about calc(), but I've usually been able to use something like {position: relative; left: X%; margin-left: -Ypx;} to get stuff positioned with both percent and pixels. Though it's been tricky sometimes, there's always been some magical combination of width, left, margin, padding and maybe float to avoid resorting to JS for this so far; kinda curious when it would be necessary.
- deleted 14y ago[deleted]
- geargrinder 14y agoAnything in an orange box is an infringement of the YCombinator mark? The Aptiverse logo doesn't have a white outline and is a different font, not to mention a completely different letter. There is certainly no confusion for me.
- MichaelApproved 14y agoMost importantly, it doesn't even appear that the "Y" with orange background is even trademarked by YC.
- pbhjpbhj 14y agoTrademarks are acquired by commercial use. You presumably mean registered.
- MichaelApproved 14y ago"Trademarks are acquired by commercial use." Are you trying to differentiate between a registered and unregistered trademark? From what I understand, to get an unregistered trademark, you must add "TM" to your mark. That type of mark is mainly valid in the region/state that you're doing business out of. To get a registered trademark circle r (R), you must file the right paperwork and pay a fee with the federal gov. In both cases, to maintain your trademark, you must clearly show that it is your trademark with either a TM or a circle R (R). There are other requirements but these are the two I was looking for when stating that there is no YC trademark. If they do have a trademark on the Y with orange background, it's being maintained poorly.
- bensummers 14y agohttp://caniuse.com/ http://caniuse.com/ is a wonderful resource for checking exactly which browsers support new and exciting features, and whether they need a prefix.
- jongalloway2 14y agoHere's info on calc support: http://caniuse.com/calc http://caniuse.com/calc No support in Opera, requires -webkit prefix in prefix-encumbered browsers ;-)
- X-Istence 14y agoMeh, Opera now is WebKit ... so the -webkit prefix should work ;-)
- trhaynes 14y agoExamples and browser compatibility stats would have been nice additions to this post.
- busticated 14y agoThese are nice but it's funny how they fall short: 1: you can't combine attr() and calc() - calc(attr(data-count) + 10) <-- nope 2: how would you count down from an arbitrary number of child elements? you need to set the total via counter-reset... and, no you can't do content-reset: foo attr(data-count)
- philfreo 14y agoThese are really good tips. I use fancy CSS2 and CSS3 stuff all the time and wasn't familiar with all of these.
- rorrr 14y agoAnd which major browsers support all of that?
- Trezoid 14y agoAll of them except Opera (though webkit needs the -webkit- prefix on calc())
- pjungwir 14y agoWow, for a "three things you need to know" title, this article was surprisingly informative. Combining attr with :before is a nice trick; I'll be on the lookout for my own reasons to use that. And calc sounds great.
- Igalze 14y agoMy thoughts exactly. I will defiantly consider it formy "Top 10 blogs about 3 thing you need to know (Best)" blog :)
- glitchdout 14y agoHere's a reason to use the :before + attr() combo: Combine it with media queries to progressively display more flair content when more space is available. Check this CSS Tricks article to see what I mean: http://css-tricks.com/css-media-queries/ http://css-tricks.com/css-media-queries/ Really cool stuff.
- p4bl0 14y agoThe only time I've wanted to use attr() was with :after and it was to customize a picture gallery using only CSS, I wanted to display under each picture its caption which was in the alt attribute, but nowhere in the HTML. Unfortunately :after and :before do not work with the img element…
- jdavis703 14y agoA useful case to use this is for custom tooltips. I'll probably rip out the JS solution in my companies app for the attr function.
- deleted 14y ago[deleted]
- wwweston 14y agoTwo cases I've found in the past: * Styling important content links for print. An anchor tag isn't clickable in print media, potentially leaving important citation information out. You can use attr to put it back in. * Sometimes you find yourself debugging device/browser where you don't have a powerful inspector/debugger. Being able to make attribute data visible can help.
- importednoob 14y agodisplay:none vs visibility:hidden is a need-to-know display: inline-block coupled with font-size: 0px on the parent is huge as well inset box-shadows are pretty cute too
- afshinmeh 14y agoUpvote for calc() function, Useful.
- leeoniya 14y agowow, calc() is sweet enough to drop a LESS dependency in a lot of cases.
- ht_th 14y agoI've used attr()to do some localisation, i.e., add "Chapter" or "Kapitel" before an H1 chapter heading depending on the lang attribute on the HTML element. Useful stuff.
- markdown 14y agoAs I recall, calc should be avoided if performance is a consideration in your project.
- mnicole 14y agoI love calc, but there's also a webkit bug that causes transitions applied to elements with calc'd dimensions to crash the browser that I don't believe has been fixed yet. The crash is particularly rough for Safari (closes with no warning), but just stops the other browsers from loading the page once it hits that element.
- _ZeD_ 14y agois there a way for attr() (or similar) to access other css properties? In the example there is .child { position: absolute; left: 100px; width: calc(90% - 100px); background-color: #ff8; text-align: center; } whould be gorgeous to write instead .child { position: absolute; left: 100px; width: calc(90% - attr(left px)); background-color: #ff8; text-align: center; } the mdn attr page[0] says it can also access properties, but I cannot find a way [0] https://developer.mozilla.org/en-US/docs/CSS/attr https://developer.mozilla.org/en-US/docs/CSS/attr