Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

OT: css variables, (custom properties)

LEGEND ,
Mar 28, 2017 Mar 28, 2017

As you all know I am not a fan of pre/post-processors, but I can understand why people use them.

One of the main reasons given is the use of variables, which I will agree is an advantage, but now that Edge is implementing support for the W3C CSS Custom Properties module, that reason will greatly diminish over the next few years.

Microsoft has published an article describing the use of css variables, with an example of how to create fallback for those interested.

https://blogs.windows.com/msedgedev/2017/03/24/css-custom-properties/#0m9wDZ4VAQAZdcsF.97

if your variable value is -

--primary: #0B61A4;

then the use with fallback would be -

body {

  background: var(--primary, blue);

}

3.0K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 13, 2017 Apr 13, 2017

to get what I mean... copy paste what's below and test it in a browser

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Document sans nom</title>

<style>

    @media (max-width:25em){

        body {

            --couleur:red;

        }   

    }

    @media (min-width:25.0625em){

        body {

            --couleur:blue;

        }

    }

    h1 {

        color:var(--couleur);

    }

</style>

</head>

<body>

<h1>Titre</h1>

</body>

</html>

Could'nt they come up with something better than -- that's really awfully poor syntax and hard to read (is it a long dash or 2 short dashes) I mean even a + would have been better or even ++ if + is not available

This is what pisses me off about everything its ruined by short-sighted morons. What's the stupid thinking behind that?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 13, 2017 Apr 13, 2017

I will probably be long retired, but using ++ was discussed for the original editors working draft proposal, and all i can remember is that because of giving css additional features in the future, included a feature that used ++ , it was decided to reserve that for future use.

The development of specs will always be behind what users want, but a lot of improvments are still planned.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 13, 2017 Apr 13, 2017

what ever the syntax is, the door is open and I think that it is time to go in... and play with... then for sure stuffs will go on.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 13, 2017 Apr 13, 2017

osgood_​ wrote:

Could'nt they come up with something better than -- that's really awfully poor syntax and hard to read (is it a long dash or 2 short dashes) I mean even a + would have been better or even ++ if + is not available

This is what pisses me off about everything its ruined by short-sighted morons. What's the stupid thinking behind that?

There are two things I would like to say

  1. Name calling should not happen in this forum
  2. Two short dashes takes less effort to type than one +
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 14, 2017 Apr 14, 2017

Well I guess you could use // or /// - at least its distinguishable raher than --  no-one ever worried about typing $ or @ so its irrelvant. It's more important to have a visually clear syntax and a couple of short dashes really doesnt address that in my opinion. it just comes across to me as an after thought given to something which is going to be with us for some considerable time, so it has to be right.

As for the name calling, I get a little passionate from time to time, which can cause problems, (I'm sure you have never done that in your life Ben, your whiter than white of course you are) rather that just sittng on my backside accepting what's thrown at me and saying oh well 'what ever will be  will be'.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 14, 2017 Apr 14, 2017

This syntax is not impressive at all if you have to type all the below just to evoke the variable (I'm sure that will upstet some people)

var(--color);

why not just --color;

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 14, 2017 Apr 14, 2017

it is not that I don't want to discuss about naming and convention here, I think that it is also important than the features themselves... but I think that it is not the right place... whatever nice skull juice that will come out from it will be lost in this thread... instead... why not directly going on the appropriate forum, or list

CSS Custom Properties for Cascading Variables Module Level 1

you will find there the mail for beeing involved in different topics such namming... and get access to the full archives

W3C mailing-list search service

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 14, 2017 Apr 14, 2017

osgood_  wrote

As for the name calling, I get a little passionate from time to time, which can cause problems, rather that just sitting on my backside accepting what's thrown at me and saying oh well 'what ever will be  will be'.

Then why not join the Prerelease Program, that's where you can make your voice heard. And please do not accept the word of 'Good Authority' echoing sentiments of the past.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 14, 2017 Apr 14, 2017

Ok, point taken - I'm just plain bad sometimes..........hummm. I'm not going to change anything, I just feel better letting off a bit of steam if I feel something has not been properly thought about. Maybe it has, I just dont know why it was considered best to use -- or have to type out an extra long variable name to make it work when it could, on the surface, be more consise. It just seems crazy to someone like myself.

Regardless of the naming convention its good that variables are an option right within the css file, so in that respect happy days!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 14, 2017 Apr 14, 2017

BenPleysier  wrote

Then why not join the Prerelease Program, that's where you can make your voice heard. And please do not accept the word of 'Good Authority' echoing sentiments of the past.

They are not statements of the past.

That said, unless an Adobe staff member wishes to ask openly in this forum why I think joining the pre-release is a waste of time, they are not for this forum.

If you wish to PM me, I will however discuss the pre-release with you personally.

EDIT: My last post to the pre-release was 1 month ago, so certainly not from the past, (and I'm still waiting for an answer).

osgood_​

The css variable syntax is not something anyone can now change, and many people DID feel the same as you do about it in the css styles discussions. That said, once users start to actually use it, it does quickly become easy to remember and use.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 14, 2017 Apr 14, 2017

pziecina  wrote

osgood_

The css variable syntax is not something anyone can now change, and many people DID feel the same as you do about it in the css styles discussions. That said, once users start to actually use it, it does quickly become easy to remember and use.

Well the good news is when they become 'safe' to use in all browsers I wont be doing this any longer. As I have Safari 8 and can't update it for for another 2-3 years theres not a chance I can use them.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 14, 2017 Apr 14, 2017
LATEST

osgood_  wrote

Well the good news is when they become 'safe' to use in all browsers I wont be doing this any longer. As I have Safari 8 and can't update it for for another 2-3 years theres not a chance I can use them.

What we now require is an autofallback creator for css variables, but as we cannot get a stand alone autoprefixer in DW !!!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 13, 2017 Apr 13, 2017

Thank you Birnou,

I keep saying that users should be able to work how they want to work.

The use of sass, or any other pre/post processor should be included in all editors, but so should support for w3c spec methods of working, and the tools to do so.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Apr 13, 2017 Apr 13, 2017

Birnou and Paula have demonstrated that CSS variables are simple to implement;really simple. Anyone can start using them after spending one minute learning how they work. And they hardly change the way one would write CSS. . .except for the better.

I think it's a fantastically useful feature.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines