Is it ok to use CSS custom attributes in a theme?

Solved
Highlighted
New Member
9 0 0

I am looking to see some thoughts about using CSS custom attributes in theme development, something like the following (like any CSS custom attributes):

 

--some-attributes: 1rem;
font-size: var(--some-attribute);

The above example is just a simple demonstration of a CSS attribute, surely you are familiar what I am referring to.

Should I use them in theme development? Is there any concern?

 

PS — I am well aware of the browser compatibility and all the debates out there, I am not looking for some generic explanation of why custom attributes are good or bad, I am putting this question here so someone "in Shopify" address this, about this specific platform, so please kindly do not start generic debates about the subject, than you!

 

 

 

P.A.
0 Likes
New Member
9 0 0

Why this community is so quiet? Nobody bothers answering questions, or this post is not reaching out to the right people? Something is not right. 

P.A.
0 Likes
Shopify Partner
1361 21 195

CSS Variables are great.

You probably won't see many themes using them due to a somewhat limited support: https://caniuse.com/#feat=css-variables

This is not something that gracefully degrades and some business do want to cover that missing support.

 

With Liquid some developers will prefer:

 

--some-attributes: 1rem;font-size: var(--some-attribute);

 

to 

 

font-size: {{ settings.font_size }}

This way you will still have a reusable variabile and also be able to modify that var through the theme editor.

I know that this is not a substitute, won't cover cases like JS + CSS Custom Properties dynamic changes and other cool things they can do,  but will most likely be a preferred  approach for Shopify devs, especially when  old browser support is needed.

 

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
9 0 0

Thank you for your answer, Mircea. So in theme development, concerning the theme development regulations, if one does not fully support IE, because of using the CSS custom properties, is the theme acceptable? or supporting IE is still a requirement by Shopify? (I thought you might have some info on this)

 

Also, I am using Slate, and as you may know, CSS custom properties are being used for extracting "settings.entries", and this is something which comes with Slate by default, does that mean that we are OK not supporting IE? Since it comes with Slate by default.

 

Any though on this is greatly appropriated.

P.A.
0 Likes

Success.

Shopify Partner
1361 21 195

Hey Perrin,

I believe, and may be wrong here, that Slate has an option to replace those custom CSS props, via Webpack, to Liquid variables:  https://github.com/Shopify/slate/wiki/Slate-CSSVar-Loader

And this is the right call, devs can decide to use them or not in production.

 

Regarding the Shopify theme submission requirements, you can check the official docs: https://help.shopify.com/en/themes/development/theme-store-requirements/browser-support-requirements

I would say that this will fail, used for layout, as you need to support Internet Explorer - IE 11 only for PC (layout)

 

Best

 

 

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
9 0 0

I thought the same, but I was hoping that I was wrong and there is a way to use them. I will have to redo a bunch of styling then. In any case, thank you for the answer and clarifying it.

P.A.
0 Likes
Shopify Partner
1361 21 195

Please do not take my answer as definitive.

An official point of view here would clear this as the "Supported browsers" spec is unclear, at least to me.

 

If you look to https://help.shopify.com/en/themes/development/theme-store-requirements/browser-support-requirements... you will see that "progressive enhancement" is encouraged.

 

Totally breaking the layout is not cool, same with a font-family, you want a baseline there.

But a transition or a box shadow, and things with a decent fallback should pass.

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
9 0 0

True, I unfortunately have done more than just shadows. It won't break the page, but it's not gonna be pretty. Thanks again for taking the time and sharing your thoughts.

P.A.
0 Likes
Shopify Partner
1361 21 195

Sure,

Best of luck with your theme Perrin

https://sections.design tips, tricks & Shopify sections
0 Likes