CSS Custom Variables

This presentation was targeted at introducing Nigerian women to CSS custom variables. According to www.caniuse.com, Nigeria has a 56.73% website traffic supports of CSS Variables. Nigerian women are not still aware of its benefits compared to CSS preprocessors.

Transcript

1. Chioma James, Frontend Engineer at Webcoupers @chiomy0 CSS Custom Variables International Women’s Day
2. My name is Chioma James I have a twin sister Local Leader for Lepsta Developers A Local Guide (Google Maps) A Front End Developer @Webcoupers
3. Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors(Less, SASS) is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring. Preprocessors A CSS preprocessor is a program that lets you generate CSS from the preprocessor own unique syntax. These features make the CSS structure more readable and easier to maintain. Source: smashing magazine
4. But preprocessor variables have some limitations: • You cannot change them dynamically. • They are not aware(access) of the DOM’s structure. • They cannot be read or changed from JavaScript. • You must use a compiler. Preprocessors
5. As Developers and tech enthusiasts we must understand that the web belongs to the User and not the author Source: Sara Soueidan
6. CSS Custom Properties (also known as Variables) is a big win for front-end developers. It brings the power of variables to CSS, which results in less repetition, better readability and more flexibility. Per Harald Borgen
7. Image Credit: https://www.w3schools.com/css/css_syntax.asp
8. • Does not need a compiler. • Unlike variables from CSS preprocessors(SASS, LESS), CSS Variables are actually a part of the DOM, • Css properties/variables can be inlined styles html. • Variable font :A variable font is a single font file that acts like multiple fonts. The variable font stores multiple variations of a type family. Benefits of Css Custom Variables
9. Each preprocessor requires a different way of declaring variables. Usually, it starts with a reserved symbol; $ in Sass @ in LESS. CSS custom properties use - - to introduce a declaration. Css Custom Variables - Syntax
10. :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); filter: blur(var(--blur)); } Css Custom Variables - Syntax h1 { color: var(--base); } a { color: var(--base); text-decoration: none; } Source: Wesbos
11. Css Custom Variables - Syntax :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); Source: smashing magazine
12. Css Custom Variables - Syntax :root { --main-font-size: 16px; } @media all and (max-width: 600px) { :root { --main-font-size: 12px; } }
13. Currently, 91.36 percent of global website traffic supports CSS Variables. Data collected on 27th of April 2019 Browser support Source: caniuse
14. Browser support As we saw, CSS custom properties are still not available in every browser. Knowing this, you can enhance your application by checking if they are supported. For instance, you could generate two main CSS files: one with CSS custom properties and a second without them, in which the properties are inlined. Load the second one by default. Then, just do a check in JavaScript and switch to the enhanced version if custom properties are supported: Source: smashing magazine
15. Browser support <!-- HTML --> <link href="without-css-custom-properties.css" rel="stylesheet" type="text/css" media="all" /> // JavaScript if(isSupported){ removeCss('without-css-custom-properties.css'); loadCss('css-custom-properties.css'); // + conditionally apply some application enhancements // using the custom properties } Source: smashing magazine
16. Stop that ! ALL developers need Help
17. Ask questions Improve our skills Keep learning Take up projects Collaborate with others What Can I Do?
18. https://v-fonts.com/ www.w3schools.com https://css-tricks.com/css/ https://www.w3.org/TR/css-variables/ https://www.sarasoueidan.com/ Resources
19. Q&A
20. Chioma James Twitter: @chiomy0 Thank you!