OMG! This resolved so many issues I was facing with my new framework. In just 30 minutes! (@2x speed) I bow down to you with immense gratitude, the angelic figure Lea, the CCS Conf organizers and BocoupLLC for uploading this here. 🙇♂️🙇♂️🙇♂️
Thanks for the video, super interesting! Anyone getting a mixture of accents coming through here? I swear I heard American, British, Indian and Scottish.
@@greggsworld4453 Nope, I only hear Greek. I knew she was Greek even before reading her name. (But then again, I work in Greece/Cyprus for the last decade, so I've had lots of "training". 😛)
Thank for the video. Can you tell me how I can access a variable from another script? This is what I trying to do. I have a main webpage with main.js that asks for validation (just password). If the password is correct I set a variable (in main.js) true. Then when I try loading a dependent webpage with dep.js, how can I access and get the value of the variable I had set in main.js using the dep.js file? My goal is to make sure that the dependent page does load until the correct login is issued on the main page.Unless if there's another effective way of doing, please let me know. I'm NOT using C# or PHP....just HTML and .js file.....
Your deadline for this has probably passed long ago, but it may help someone else. I've been using "someElementHandle.getComputedStyleValue('--somevar');". There is also a variant of this as a "static" call which is "getComputedStyleValue(someElementHandle, '--somevar');". The call will return empty when the variable is not defined, so you can use that to set a default value. someElementHandle is the DOM Node object. Docs: developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIAccessNode#getComputedStyleValue()
THANK YOU FOR DOING THIS PRESENTATION! How it impacted me? Well, it got me doing a framwork based on CSS variables. (github.com/jgthms/bulma/issues/1837#issuecomment-553895472). I'm the front end dev of the open source project ESP Easy. We wanted to do the front end 100% modular and after first using Bulma as a framwork I came to the dead end = I built a framwork specially for GUI creation. Thank you for helping me :)
30:44, although this is cool and probably just an example, wouldn't styling *{} be expensive for the browser to render clip-path to every element in the dom ?
No sorry thats not the answer... For before and after that is correct because a pseudo element like that needs the content property to have a value to render it to the dom. Each property in css has an initial value, defined in the property’s definition table, its like a 'default' if you will. By setting something like clip-path: initial, that is causing the browser to set the value of that property to its default state. In this case clip-path's default/initial state is 'none'. I dont know if setting clip-path: none has an effect on performance because it is none but its still setting it... and in the case, on all elements. But what if its not clip-path and default isn't none? maybe you have to be smart enough to look it up before implementing it.
instead of using *{}, you could restrict this use to specific components. There's an example at css-tricks.com/making-custom-properties-css-variables-dynamic/
![Eminem - Tobey (feat. Big Sean & Babytron) [Official Audio]](http://i.ytimg.com/vi/9xn0OHEZZ8Q/mqdefault.jpg)
Thank you for uploading these! I love all of Lea's presentations.
Thank you I love all of Lea's presentations.
OMG! This resolved so many issues I was facing with my new framework. In just 30 minutes! (@2x speed)
I bow down to you with immense gratitude, the angelic figure Lea, the CCS Conf organizers and BocoupLLC for uploading this here. 🙇♂️🙇♂️🙇♂️
Nice to see people fighting back against the ever consuming javascript styling
lol you even javascript html now
Awesome presentation. Now I am not confused on CSS variables. Thanks for uploading....
Thanks, great info!
Super inspiring!
Ahh, this was so great! c:
Awesome stuff
Fantastic! Thank you Lea! This is going to be big. (Wondering WHEN Edge will chime in though.)
They have announced it for the next version of Edge.
There is hope! There is hope!
Thanks for this video. Turns out all my CSS bugs came from not using CSS variable daisy chaining properly. *facepalm*
not a bug in chrome, I mean the
Thanks for the video, super interesting! Anyone getting a mixture of accents coming through here? I swear I heard American, British, Indian and Scottish.
oo and Russian
@@greggsworld4453
Nope, I only hear Greek.
I knew she was Greek even before reading her name.
(But then again, I work in Greece/Cyprus for the last decade, so I've had lots of "training". 😛)
What is she using to make that presentation?
I'm using my own slideshow framework, called CSSS: github.com/leaverou/csss
These are the slides for this talk: github.com/leaverou/css-variables
thanks for the answer Lea, you are of great inspiration! Keep up the great work
Thank for the video.
Can you tell me how I can access a variable from another script? This is what I trying to do. I have a main webpage with main.js that asks for validation (just password). If the password is correct I set a variable (in main.js) true. Then when I try loading a dependent webpage with dep.js, how can I access and get the value of the variable I had set in main.js using the dep.js file? My goal is to make sure that the dependent page does load until the correct login is issued on the main page.Unless if there's another effective way of doing, please let me know. I'm NOT using C# or PHP....just HTML and .js file.....
Your deadline for this has probably passed long ago, but it may help someone else. I've been using "someElementHandle.getComputedStyleValue('--somevar');". There is also a variant of this as a "static" call which is "getComputedStyleValue(someElementHandle, '--somevar');". The call will return empty when the variable is not defined, so you can use that to set a default value. someElementHandle is the DOM Node object. Docs: developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIAccessNode#getComputedStyleValue()
THANK YOU FOR DOING THIS PRESENTATION! How it impacted me? Well, it got me doing a framwork based on CSS variables. (github.com/jgthms/bulma/issues/1837#issuecomment-553895472). I'm the front end dev of the open source project ESP Easy. We wanted to do the front end 100% modular and after first using Bulma as a framwork I came to the dead end = I built a framwork specially for GUI creation. Thank you for helping me :)
30:44, although this is cool and probably just an example, wouldn't styling *{} be expensive for the browser to render clip-path to every element in the dom ?
I think its answer can be found here 37:24. Please do correct me If I am wrong.
No sorry thats not the answer... For before and after that is correct because a pseudo element like that needs the content property to have a value to render it to the dom.
Each property in css has an initial value, defined in the property’s definition table, its like a 'default' if you will. By setting something like clip-path: initial, that is causing the browser to set the value of that property to its default state.
In this case clip-path's default/initial state is 'none'. I dont know if setting clip-path: none has an effect on performance because it is none but its still setting it... and in the case, on all elements. But what if its not clip-path and default isn't none? maybe you have to be smart enough to look it up before implementing it.
wow! Totally agree with what you have just explained. Thanks for your wonderful explanation :)
instead of using *{}, you could restrict this use to specific components. There's an example at css-tricks.com/making-custom-properties-css-variables-dynamic/
don't think so... most people actually use that kind of selector, for instance to make everything box-sizing:border-box
not for enterprise because of IE