Three CSS features you need to know about(aptiverse.com)
aptiverse.com
Three CSS features you need to know about
http://aptiverse.com/blog/css_features/
18 comments
Wow, 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.
Here'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/
Really cool stuff.
Really cool stuff.
The 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…
A 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.
My thoughts exactly. I will defiantly consider it formy "Top 10 blogs about 3 thing you need to know (Best)" blog :)
Two 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.
* 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.
[deleted]
http://caniuse.com/ is a wonderful resource for checking exactly which browsers support new and exciting features, and whether they need a prefix.
Here's info on calc support: http://caniuse.com/calc
No support in Opera, requires -webkit prefix in prefix-encumbered browsers ;-)
No support in Opera, requires -webkit prefix in prefix-encumbered browsers ;-)
Meh, Opera now is WebKit ... so the -webkit prefix should work ;-)
-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.
...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.
Box-sizing should be supported unprefixed as well (recent versions of IE, Chrome, FF and Opera; not sure about the current Safari).
And 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.
And put the unprefixed version below the prefixed properties, so it has priority in browsers that support both.
Unless the spec is still in flux and the unprefixed syntax changes, then you're SOL.
Still 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).
Sorry - unprefixed version was there, just removed when I pasted it in (hence my mangled code edit!)...
Also worth checking out is `display: box` and the plethora of flexbox related layout properties.
I'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.
As an aside, is Aptiverse in YC? If not, the logo could potentially be a case of mild trademark infringement.
Anything 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.
Anything in an orange box is an infringement of the YCombinator mark?
That would be a bit of a stretch to try and prove in court.
.
The Aptiverse logo doesn't have a white outline
Actually, the white outline is part of the HN design, not the YC logo; if you go to the main page (or look at the favicon) you'll see that it appears without the outline.
.
and is a different font, not to mention a completely different letter. There is certainly no confusion for me.
I'm not saying Aptiverse would 100% lose a hypothetical lawsuit here, but the branding is absolutely confusingly similar[1] to at least a sizeable subset of reasonable people (myself included, at first glance).
1. Identical shape (a box with sharp edges)
2. Identical shade of orange used as background (or close enough that a human eye can't make a clear distinction)
3. Identical text colour
4. Identical/similar letter size / size ratios
5. tl;dr: Same identifiable visually distinct design of one letter centred within a slightly larger box, with the exact same colour scheme and only minor cosmetic differences
6. Not only are the two companies in the same industry (software/tech startups), but Aptiverse actively participates in a community owned and operated by Y Combinator, further increasing the likelihood of perception of the two being affiliated
.
Again, I don't mean to suggest that this is a cut-and-dry case of trademark infringement, or that any action should necessarily be taken on the part of either YC or Aptiverse regarding the matter, but to seriously suggest that taking the YC logo then changing the letter and making it italic with a slightly different typeface removes all reasonable possibility of confusion or ambiguity is willfully oblivious.
---
1: http://en.wikipedia.org/wiki/Confusing_similarity
That would be a bit of a stretch to try and prove in court.
.
The Aptiverse logo doesn't have a white outline
Actually, the white outline is part of the HN design, not the YC logo; if you go to the main page (or look at the favicon) you'll see that it appears without the outline.
.
and is a different font, not to mention a completely different letter. There is certainly no confusion for me.
I'm not saying Aptiverse would 100% lose a hypothetical lawsuit here, but the branding is absolutely confusingly similar[1] to at least a sizeable subset of reasonable people (myself included, at first glance).
1. Identical shape (a box with sharp edges)
2. Identical shade of orange used as background (or close enough that a human eye can't make a clear distinction)
3. Identical text colour
4. Identical/similar letter size / size ratios
5. tl;dr: Same identifiable visually distinct design of one letter centred within a slightly larger box, with the exact same colour scheme and only minor cosmetic differences
6. Not only are the two companies in the same industry (software/tech startups), but Aptiverse actively participates in a community owned and operated by Y Combinator, further increasing the likelihood of perception of the two being affiliated
.
Again, I don't mean to suggest that this is a cut-and-dry case of trademark infringement, or that any action should necessarily be taken on the part of either YC or Aptiverse regarding the matter, but to seriously suggest that taking the YC logo then changing the letter and making it italic with a slightly different typeface removes all reasonable possibility of confusion or ambiguity is willfully oblivious.
---
1: http://en.wikipedia.org/wiki/Confusing_similarity
Most importantly, it doesn't even appear that the "Y" with orange background is even trademarked by YC.
Trademarks are acquired by commercial use. You presumably mean registered.
"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.
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.
I'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]
Is 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...
There's no perf hit. You're fine. (IE Expressions however, had a big perf hit)
https://developer.mozilla.org/en-US/docs/CSS/calc#Browser_co...
Looks like calc is supported in Chrome 19+, Firefox 16+, IE9+, Safari 6+.
Looks like calc is supported in Chrome 19+, Firefox 16+, IE9+, Safari 6+.
He/she was asking if it performs well, not if it is supported.
[deleted]
Not in Chrome for Android though.
As I recall, calc should be avoided if performance is a consideration in your project.
I 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.
These 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)
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)
Examples and browser compatibility stats would have been nice additions to this post.
How have I lived without calc() for all this time?....
The 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.
No 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!!!!!
Then again, ideally fluid layouts with multiple columns would use (ta-daaa) columns: http://caniuse.com/#feat=multicolumn
thats 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!!
always these problems with width and 100% - i def. give it a try in the next project!!
You likely want to use box-sizing: border-box instead, it's simpler and more efficient: http://paulirish.com/2012/box-sizing-border-box-ftw/
Yep exactly, this is making my layouts a lot easier lately.
is there a way for attr() (or similar) to access other css properties?
In the example there is
[0] https://developer.mozilla.org/en-US/docs/CSS/attr
.child {
position: absolute;
left: 100px;
width: calc(90% - 100px);
background-color: #ff8;
text-align: center;
}
.child {
position: absolute;
left: 100px;
width: calc(90% - attr(left px));
background-color: #ff8;
text-align: center;
}
[0] https://developer.mozilla.org/en-US/docs/CSS/attr
I'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.
These are really good tips. I use fancy CSS2 and CSS3 stuff all the time and wasn't familiar with all of these.
wow, calc() is sweet enough to drop a LESS dependency in a lot of cases.
attr() seems incredibly useful, and calc() nicely augments static calculations provided by LESS CSS et al. I'm definitely going to use these.
Upvote for calc() function, Useful.
display: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