class: center, middle, front # CSS selectors and CSS-only menus #### "Low Light" by blavandmaster is licensed under CC BY-NC-SA 2.0 ??? Notes go here and will be in the source but not displayed --- # outline 1. what you build on top of matters 1. Cascading Style Sheets (CSS) selectors 1. source code of blog.cloudflare.com 1. old style input labels 1. CSS-only hamburger menu --- # what you build on top of matters - appropriate complexity can drive either re-use or re-invention - [layers of abstraction](https://wiki.c2.com/?PrematureGeneralization) may introduce competing conventions and make custom enhancements more difficult - every dependency may come along with its own branching set of dependencies and assumptions - todays cool thing is tomorrows outcast, meet: [jQuery](https://mmikowski.github.io/why-jquery/) (this will also happen to Node.js and React and ...) - frameworks may lead you to avoid native functionality ??? Re-using existing working code is building on the work of what came before us Should a site that does not do any dynamic interaction require Javascript? Does using the latest frameworks keep us current or make our work more brittle? --- # [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) Select nuts and bolts of how CSS targets some pretend HTML elements: ```html
One
Two
Three
Four ``` The applicability "cascade" in "Cascading Style Sheets": ```css /* increasingly more specific CSS selectors */ * { color: purple } /* most general */ elem { color: red } /* more specific - all elem's */ par elem { color: yellow } /* all elem's within a par */ elem.css-class { color: orange } /* all elem's with class css-class */ elem#element-identifier { color: brown } /* only id element-identifier */ ``` ??? HELPFUL TIP: Read selectors right-to-left... --- # [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) Select nuts and bolts of how CSS targets some pretend HTML elements: ```html
One
Two
Three
Four ``` The applicability "cascade" in "Cascading Style Sheets":
One
Two
Three
Four
```css /* increasingly more specific CSS selectors */ * { color: purple } /* most general */ elem { color: red } /* more specific - all elem's */ par elem { color: yellow } /* all elem's within a par */ elem.css-class { color: orange } /* all elem's with class css-class */ elem#element-identifier { color: brown } /* only id element-identifier */ ``` ??? HELPFUL TIP: Read selectors right-to-left... --- ## [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) example ```html
restart
learn
zombo.com
``` ```css nav.example li { background-color: lightgrey; } nav.example li:last-child { list-style-type: "→"; font-style: italic } ```
restart
learn
zombo.com
??? HELPFUL TIP: Read selectors right-to-left... Prefer semantic elements like nav, aside, header over div When CSS is written to match the HTML it should target and HTML is written to be targetted pages can contain far less code The 'cascading' in the name CSS is really about appropriate style reuse because of the hierarchy of elements and styles --- # source code of [blog.cloudflare.com](https://blog.cloudflare.com) - readablility (syntax highlighting only gets you so far) - repetition of CSS classes without selection targetting - does this represent us as well as the blog content does? - would anyone be easily able to or want to re-use this code? ??? Now that we have had a refreshed look at the targetting of CSS selectors lets look at the source code of the blog --- # good ol' input labels - capture some state - can be targetted with CSS ```html
Shoe
👟
``` ```css #shoe:checked + label { font-style: italic; } #shoe:checked + label + small { display: none; } ```
Shoe
👟
??? During the Internet Explorer 2 era not all browser versions correctly supported label clicking to modify the state of the checkbox Note the use of the adjacent sibling combinator + And importantly the dynamism that targeting offers us - including visibility --- # CSS-only hamburger menu
```html
🍔
Approach
People
Projects
``` ```css .burger-shower { display: none; } .burger-shower:checked ~ .burger-menu { display: block; } .burger-menu { display: none; position: absolute; } ``` ??? This is literally the code running on the following page to make the menu work Notice the general sibling combinator ~ Note the use of display none to remove the element from consideration by layout engine Absolute position pulls the element out of the static ordering and placement and attaches it to the parent location ---
🍔
Approach
People
Projects
??? ---
Approach
People
Projects
Cloudflare Research