25. What does this do?
function MM_reloadPage(init) {
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
26. The “Netscape Resize Fix”
If the user resized their browser window positioned
elements lost their positioning values.
The “fix” was to reload the browser window on resize.
27.
28. … basic support of existing W3C
standards has been sacrificed in
the name of such innovation,
needlessly fragmenting the Web
and helping no one.
1
http://archive.webstandards.org/mission.html
29. Our goal is to support these core
standards and encourage browser
makers to do the same, thereby
ensuring simple, affordable access
to Web technologies for all.
1
http://archive.webstandards.org/mission.html
35. Thanks to the hard work of
countless WaSP members and
supporters (like you), Tim Berners-
Lee’s vision of the web as an open,
accessible, and universal community
is largely the reality.
1
http://www.webstandards.org/2013/03/01/our-work-here-is-done/
39. Creating a better layout
system for the web
A story that begins in 1996
40. "Traditional page-layout authoring tools
for desktop publishing allow you to create
and move and resize document frames.
You can then view and alter properties of
these frames, e.g. the background color
and the style of borders if any."
- https://www.w3.org/TR/NOTE-
layout
41. "these policies cause an element to
define an invisible grid, in which
descendant element will be placed."
- https://www.w3.org/TR/
2005/WD-css3-
layout-20051215/
49. Studies show that a todo list is
the most complex JavaScript app
you can create before a newer,
better framework is invented.
1
http://www.allenpike.com/2015/javascript-framework-fatigue/
86. How do we create a flex container?
display: box
display: flexbox
display: flex
Flex shorthand for the flex items?
box-flex: 1
flex: 1
87. Defining a Grid the old way
#grid {
display: grid;
grid-definition-columns: 150px 1fr;
grid-definition-rows: 50px 1fr 50px
}
The new way
#grid {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: 50px 1fr 50px
}
100. Your CSS Dev Conf Challenge
1. Find something directly relevant to a problem you
have today
2. Find something that just gets you excited about the
possibilities of CSS
3. Share and teach what you have learned.
