hack content property

[jofpin]

I hack the property content only works in safari : http://codepen.io/jofpin/pen/cdeao my new hack

content: "Hack content"\@/"";

[KittyGiraudel]

@jeffclayton Would you mind having a look at this if you ever get a couple of minutes?

[jofpin]

It is only compatible with webkit (safari) :D

[jeffclayton]

Will be glad to, and glad to see people contributing!

On Friday, June 27, 2014, Hugo Giraudel notifications@github.com wrote:

@jeffclayton https://github.com/jeffclayton Would you mind having a look at this if you ever get a couple of minutes?

— Reply to this email directly or view it on GitHub https://github.com/4ae9b8/browserhacks/issues/147#issuecomment-47377189.

[jofpin]

Many Thanks! :smile_cat:

[jeffclayton]

On the windows boxes and macs I have tested it on, it appears to be valid webkit (chrome and safari both).

[jeffclayton]

It doesn't affect firefox or internet explorer of course.

[jeffclayton]

Opera versions I tested: not in 10-12, but yes in 14, 21 and 22 (so Opera 14+ then)

[jofpin]

Great, this makes it more interesting!

[jeffclayton]

Yep, webkit: Safari (all), Chrome (all), Opera 14+ (Opera follows Chrome now since it went webkit)

[jeffclayton]

I think it is interesting because it resembles an internet explorer 8 hack: 'slash-zero-slash' - i still want to play with it a bit to see if ie8 might see it but haven't yet.

[jeffclayton]

Nope, no way ie 8 ;)

[jeffclayton]

Here is a simple test I did:

CSS:

.selector:after { content: "Webkit Content Here"\@/""; property:value; }

CODE:

Show Hidden Data: <span class="selector"> <\span >

[OUTPUT -- If Not Webkit]

Show Hidden Data:

[OUTPUT -- If Safari or Chrome or recent version of Opera]

Show Hidden Data: Webkit Content Here

This was fun to play with!

[jofpin]

If you brother it, I was doing the test, It is very cool! :dart:

[jeffclayton]

Sorry I didn't explain -- I did that just to test in hard to load pages... -- IE 8 didn't want to load codepen ;)

[jeffclayton]

Not trying to steal your glory if that's what you thought, sorry if you got that impression. The main idea was just to send it to a mess of tests fast to check where else it works to verify your hack that you posted. [Not everything that is posted here really works quite so well all the time which is why Hugo asked me to test it. It is still your posting even in the one-liner bare-bones converted form.]

[jeffclayton]

browserhacks.com tends to live on one-liners if it is able to work on this site at all, hence the smaller form i attempted.

[jeffclayton]

Anyway, it works great - excellent posting!

[jeffclayton]

I am thinking you may have missed this from above. I test stuff rather rigorously for this site... I was asked to check your posting:

HugoGiraudel commented 12 hours ago @jeffclayton Would you mind having a look at this if you ever get a couple of minutes?

[KittyGiraudel]

Unless I missed something, this cannot be used to define specific styles to some browsers. This can only be used to display specific content on WebKit browsers through the content property.

If that is indeed the case, we won't add it, no matter how cool it looks. Browserhacks is helping front-end developers working around browsers flaws, and this is no part of it.

[jeffclayton]

Yes, that is correct. And while the property:value pairs in this hack do work, that set of styles only affects the content that is delivered from within the hack.

[jeffclayton]

Oh well.

[KittyGiraudel]

I am sorry, did I miss something? I thought we couldn't use this hack to deliver specific styles to target browsers. Is it wrong?

[jeffclayton]

For clarification:

From Mr. Pino's codepen listing:

h1:after {
  content: "Hack content"\@/"";
  font-size: 3em;
  font-weight: bold;
  color: #3498db;
}

or my consolidation of it to a one-liner:

.selector:after { content: "Webkit Content Here"\@/""; property:value; }

His original delivers the content to webkit browsers, styled like so: " font-size: 3em; font-weight: bold; color: #3498db;"

No other browser sees it.

It appears to be effectively the same as an IE conditional comment which only delivers content to IE <= 9 browsers, except this works for Safari and Chrome (so of course recent versions of Opera as well).

You could call it a 'webkit conditional comment' technically if you do choose to post it.

I am not entirely sure without different coding if you cannot make it supply css to a whole document. No idea yet.

[KittyGiraudel]

Okay, now I get it. That is interesting, but it feels like a complicated hack. Very different from the kind of hacks we usually post. ANy thought?

[jeffclayton]

I have to think on it and mess around with it more over time. It is really neat for what it does though.

[KittyGiraudel]

So be it.

[jofpin]

Finally, work in many css hacks, construire a site where you can publish all the hacks of improvements and interesting. Thanks, I just wanted to add one of my hacks to browserhacks! :D

[jeffclayton]

Are you making a web site José?

[jofpin]

Yes, and work in a JS library, that could help much!

[jofpin]

This is a pen for my team with the content property! http://codepen.io/jofpin/pen/LxDov

[jeffclayton]

Ah nice.

[jofpin]

Thanks for the input! :smiley_cat:

[jeffclayton]

okay I came up with one for firefox... using a hack i created recently.

_:-moz-tree-row(hover), .selector:after { content: "Firefox Content Here"; property:value; }

[jeffclayton]

the cleanest one I came up with for internet explorer was for internet explorer is for 9+ and required a media query...

@media screen\0 { 
   _::selection, .selector:after { content: "MSIE Content Here"; property:value; }  
}

[jeffclayton]

Or this one (maybe better because only a media query):

@media screen and (min-width:0\0) and (min-resolution: +72dpi) { 
   .selector:after { content: "MSIE Content Here"; property:value; }
}

[jeffclayton]

If you create an MSIE 8+ media query of this, be aware that old versions (1-3) of Firefox may pick them up as well. I run into an occasional version 2-3 of Firefox in the real world every now and then with customers.

[jofpin]

oh yeah many cool bro! :dancer:

[jeffclayton]

I thought you might like those