A presentation at Umbraco UK Festival in in London, UK by Karl Tynan
let’s get to know each other… ● senior software developer at Rock Solid Knowledge ● 16+ years working with HTML, CSS and JS ● 7+ years working with Umbraco (since v4) ● Umbraco Certified Professional ● co-organiser of umBristol meetups
do you even front end?
2019 2018 2017 2016 2015 2014 2013 2012 2011 display: flex; border-radius: 1rem; display: grid; transform: scale(1.5); position: sticky; color: var(—primary);
2010 2009 2008 2007 2006 2005 2004 2003
2010 2009 2008 2007 2006 2005 2004 <table> <img src=”spacer.gif” /> style=”color: red” 2003
<frameset> <frame> <font size=”1”> <blink>tables <table>…</table>
! don’t use <table> for layout…
demo…
semantic html + css… <table class=”chart”> … <tr> <th class=”title”>Q1</th> <td class=”old”>£200</td> <td class=”new”>£400</td> </tr> …
lobotomized owl but .first … . amazing pun btw..
helper classes .first .last .odd .even etc…
the problem with helper classes… <ul class=”nav-menu”> <li class=”nav-item first”>…</li> <li class=”nav-item”>…</li> <li class=”nav-item”>…</li> <li class=”nav-item last”>…</li> </ul>
the problem with helper classes… .nav-item { margin-right: 1rem; } .nav-item.last { margin-right: 0; }
pseudo classes :first-child :last-child :nth-child(odd) etc…
the problem with some pseudo classes… .nav-item { margin-right: 1rem; } .nav-item:last-child { margin-right: 0; }
internet explorer did not support :last-child until IE9 wtfe?!
can we do it better?! yes, we can :not()
why not()… .nav-item:not(:last-child) { margin-right: 1rem; }
a warning on not()… .nav-item:not(:last-child) { color: red; } .nav-item { color: green; }
a warning on not()… .nav-item.not-last { // specificity of 2 color: red; } .nav-item { // specificity of 1 color: green; }
lobotomized owl +{…} Heydon Pickering: https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
demo…
owl vs child… .side-bar * + * { margin-top: 1rem; } .module-one:not(:first-child), .module-two:not(:first-child) { margin-top: 1rem; }
so you want to be a hipster dev?
dark mode @media (prefers-color-scheme: dark) { … }
demo…
turn the lights out… .side-bar { background-color: #eee; // very light grey } @media (prefers-color-scheme: dark) { .side-bar { background-color: #222; // dark grey } }
…or turn the lights on @media (prefers-color-scheme: light) { .side-bar { background-color: #eee; // very light grey } }
…or the user doesn’t care @media (prefers-color-scheme: no-preference) { .side-bar { background-color: #c00; // vibrant red } }
so hot right now…
responsible motion @media (prefers-reduced-motion: reduce) { … } MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
prefers-reduced-motion ● media query based on user preference ● tailor animations to be more accessible ○ sensitivity, vertigo, nausea ○ remove distractions and frustrations ● works in Chrome, Opera, Safari and Firefox ● soon to be available for Edge
html dialogs <dialog>…</dialog> MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
html datalists <datalist>…</datalist> MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
<datalist> ● native input options… like an autocomplete ● say goodbye (again) to JS plugins ● works in Chrome, Opera, Safari and Firefox (text inputs) ● partial, buggy support in IE10+ and Edge ● fixed in next version of Edge
thank you. karl tynan. @karltynan
Did you know there is a CSS selector called the ‘lobotomized owl’? Let’s take a fun journey together through the wonderful world of front end. Buckle up as we revisit my 15 years of adventures in HTML and CSS, sharing some helpful tips, tricks and random trivia.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.