5

I use a variable.less config file to store all relevant information about a design. One of the information is the breakpoint between mobile layout and PC layout. I also need this information in javascript, and I didn't know how to get it (without storing it in a data-attribute, because I wished to keep all design variables in the same file).

So I finally found that : I store my break point in the variables.less :

@bk-point: "500px";

I use the css property "content", but not on a pseudo-element, but on any tag (less file):

#any-div {
   content: "@{bk-point}";
}

Like this, this doesn't affect the design ("content" property doesn't show on element, only on pseudo-element), and I can get it very easily with jQuery :

var bkPoint = $('#any-div').css('content');

And all my variables are in the less files.

This is perfect for what I want, but is there any side-effect that I don't see ? Is this a bad practice for reasons I cannot imagine ?

Thanks for your advices !

Sébastien.

PS:
1. works in firefox 21.0 and in chromium 27.0
2. and of course, if you've got a better solution …

Sébastien
  • 51
  • 2
  • I can imagine browsers where `content` _does_ show on non-pseudo elements... On the other hand, I can also imagine browsers completely ignoring `content` on non-pseudo elements; that is, not storing the content anywhere. – Mr Lister Sep 01 '13 at 11:03
  • Yes, and I imagine that nothing guarantee that even if it does work now, it will still work in a few years … – Sébastien Sep 01 '13 at 11:26
  • Right. Still a clever idea though. – Mr Lister Sep 01 '13 at 11:31
  • I quite like this idea. No major flaws I can see. – Mitya Sep 01 '13 at 11:57

1 Answers1

1

The css 'content' property is only valid on pseudo elements: https://developer.mozilla.org/en-US/docs/Web/CSS/content

As much as this seems like a cool idea, I wouldn't feel comfortable using it in production. I think that you should accept that your js variables and css variables will be in 2 different files and then just apply the values via data-attributes.

However, if you really want a creative way to do this only from the css files that can print to the html and thus interact with the javascript, what about using valid properties that will not affect the design?

All you are really doing is storing a string in the html, so you could use a rather obscure element such as counter-reset, and then grab the value via jquery.css()

variables.less: @bkpoint = 500;
css:
#any-div {
   counter-reset: break-point @bkpoint;
}
jquery:
$('#any-div').css('counter-reset'); // returns: 'break-point 500'

simple regex function to get you rid of the 'break-point' part of the returned string and you've got what you're looking for. btw, can do this on any other css property not in use, such as:

 border-width: @bkpoint;
 border: none;

specs on counter-reset in case you're interested: http://www.w3.org/TR/CSS2/generate.html#propdef-counter-reset

DMTintner
  • 14,405
  • 5
  • 35
  • 32
  • 2
    Using counter-reset is clever, not sure how well that will work across browsers though. Using the content property on a `:after` pseudo element (with `display: none`) is pretty robust in my testing: http://stackoverflow.com/a/18457684/557612 – steveax Sep 01 '13 at 16:19
  • @steveax, this is exactly what I was trying to achieve, but I didn't know how to get the :after pseudo element with js. Your link is perfect https://coderwall.com/p/_ldtkg – Sébastien Sep 01 '13 at 17:19
  • @steveax really like your coderwall example. very nice addition to a responsive design. Only comment I have regarding the pseudo element calling the js is that in a complex layout/ architecture you're realistically going to apply some data-attributes also. And (as far as I'm aware) these can only be applied to elements and not pseudo elements, so will be easier if the same element can be targeted. Also counter-reset is CSS level 2 and has very high browser support, including IE8. However, like I said in the answer you can do this on any property as long as it is not affecting the layout. – DMTintner Sep 02 '13 at 08:40