Give CSS3 Some Love / FOWD2015

1.

Give CSS3 Some Love

2.

Because CSS4 Is Coming!

3.

Disclaimer:

4.

CSS4 Isn’t A Thing

5.

CSS Level 4 W orking Drafts

6.

CSS2.1 Last Major Version

7.

CSS Level 4 = CSS3 = CSS

8.

Confusing Much?

9.

What Am I Going T o T alk About

10.

CSS3 Usage

11.

How We Can Improve IT

12.

What’s Coming Soon

13.

@dancork

14.

Holiday Extras

15.

What’s The Problem

16.

CSS3 Usage is Poor

17.

T op 1 Million Websites http://trends.builtwith.com/css

18.

Max Width 270,538

19.

Max Width 27%

20.

Min Width 209,608

21.

Min Width 21%

22.

Media Queries 48%

23.

Chrome Anonymous Stats https://www .chromestatus.com/metrics/css/popularity

24.

transform 42.5%

25.

box-sizing 74.5%

26.

T oo often the web interface ends up being the
lowest common denominator Henrik Joreteg

27.

Engineering a UI is complex

28.

little control over the environment

29.

Does the ux NEED to be the same?

30.

Who uses multiple browsers?

31.

elephant in the room

32.

None

33.

http://caniuse.com/usage_table.php

34.

IE8 1.38%

35.

>98% support CSS3

36.

CSS is unique

37.

Passes over unknown properties

38.

Less than half of web is responsive! IE is dying
CSS is your friend CSS3 usage is poor

39.

What Can Be Done?

40.

Avoid vendor prefixes

41.

border-radius: 5px;

42.

-webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;

43.

Will become outdated

44.

technical debt

45.

T ool up with Autoprefixer postcss/autoprefixer

46.

W rite pure css

47.

W orks with LESS and SASS

48.

CLI, GRUNT , GULP or WEBP ACK

49.

Minimises T echnical Debt

50.

Media queries

51.

None

52.

None

53.

Mobile first?

54.

Majority of mobile browsers support queries

55.

FOCUS ON JOBS, THEN SCREENS, BUT NEVER DEVICES https://blog.intercom.io/why-mobile-first-may-already-be-outdated/ Paul
Adams

56.

Box Sizing

57.

Old box model was stupid

58.

Especially when building a grid

59.

Border Box

60.

Feb 1 International Box Sizing Awareness Day

61.

https://css- tricks.com/ international-box- sizing-awareness- day/

62.

OMG! It works in IE8

63.

html { box-sizing: border-box; } *, *:before, *:after { box-sizing:
inherit; }

64.

T ransform

65.

T op/Left vs T ranslate

66.

Positioning T op/Left

67.

UI animation T ranslate

68.

top/left has large paint time

69.

3D transforms hardware accelerated

70.

a { transform: translate3d(0,0,0); } a { transform: scale3d(1,1,1); }

71.

a { transform: translateZ(0); } a { transform: scaleZ(1); }

72.

no jank

73.

not everything is accelerated

74.

transform:translate transform:scale transform:rotate opacity

75.

but you can do a lot with those!

76.

Scale & Mouse events

77.

Making Material Design https://www .youtube.com/watch?v=rrT6v5sOwJg

78.

None

79.

None

80.

High Performance Animation http://www .html5rocks.com/en/tutorials/speed/high-performance-animations/

81.

csstriggers. com

82.

Vendor prefixes are stupid Go responsive, consider default Border-box all
the things T ransform for UI Animation

83.

The New Stuff

84.

Feature Queries

85.

@supports

86.

@supports (display:flex) { section { display: flex } }

87.

@supports (column-width: 20rem) and (column-span: all) { div { column-width:
20rem } div h2 { column-span: all } }

88.

Limited Support?

89.

JavaScript API

90.

CSS.supports()

91.

Polyfill

92.

Media Queries

93.

light-level

94.

dim normal washed

95.

@media (light-level: dim) { .app { background: black; color: white;
} } @media (light-level: washed) { .app { background: white; color: black; } }

96.

hover

97.

none on-demand hover

98.

.element .tooltip { /* hide tooltip */ } @media (hover)
{ .element .inline-tooltip { /* hide inline tooltip */ } .element:hover .tooltip { /* show tooltip */ } }

99.

pointer

100.

none coarse fine

101.

.link { padding 1em; } @media (pointer:fine) { .link {
padding: 0.25em; } }

102.

any-hover any-pointer

103.

pointer hover none hover course fine smartphones, touch screens stylus-based
screens mouse, touch pad Nintendo Wii, Kinect

104.

custom media queries

105.

@custom-media --small (max-width: 520px); @media (--small) { /* styles for
small viewport */ }

106.

PostCSS postcss/postcss-custom-media

107.

ranges

108.

@media (min-width: 600px) and (max-width: 1000px) {}

109.

@media (width > 600px) and (width < 1000px) {}

110.

@media (600px < width < 1000px) {}

111.

PostCSS postcss/postcss-media-minmax

112.

Relational :has()

113.

div:has(p){ background: #FF0000; }

114.

Change CSS based on content

115.

TO-DO

116.

<div class=“todo”> <input /> <ul> </ul> </div>

117.

<div class=“todo”> <input /> <ul class=“empty”> </ul> </div>

118.

<div class=“todo”> <input /> <ul style=“display:none;”> </ul> </div>

119.

.todo ul { display:none; } .todo ul:has(li) { display:block; }

120.

.todo ul:not(:has(li)) { display:none; }

121.

Ordering is important

122.

.todo ul:not(:has(li)) { display:none; }

123.

.todo ul:has(:not(li)) { display:none; }

124.

Browser support is limited

125.

It’s non existent

126.

We can try it

127.

Polyfill.js philipwalton/polyfill

128.

Polyfill({selectors: [“:has"]}) .doMatched(function (rules) { rules.each(function (rule) { $(rule.getSelectors()) .css(rule.getDeclaration());
}); });

129.

Feature queries removes reliance on JavaScript :has() is too awesome!!!
New media queries, understand the environment better

130.

last decade's "pretty good” is today’s "a bit shit" Jake
Archibald

131.

Thank Y ou TWITTER: @DANCORK SLIDES: SPEAKERDECK.COM/DANCORK/FOWD2015

Give CSS3 Some Love / FOWD2015

Give CSS3 Some Love / FOWD2015

Want more?

Transcript