The Story of Select

A Tale of Three Approaches

Hello, who dis?

Sir Tim Berners-Lee

The creator of the mother-flippen Internet!

Still Kicking

http://info.cern.ch/hypertext/WWW/TheProject.html

The Goal

Document Sharing Platform of the Future

The Goal

Document Sharing Platform of the Future

First Approach

Historical Precedent

Echoes in HTML

Radical approach to backwards compatability

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

Echoes in HTML

Radical approach to backwards compatability

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"Meanwhile, writers of Web pages were complaining that they didn't have enough influence over how their pages looked. One of the first questions from an author new to the Web was how to change fonts and colors of elements.

"Meanwhile, writers of Web pages were complaining that they didn't have enough influence over how their pages looked. One of the first questions from an author new to the Web was how to change fonts and colors of elements.

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"Meanwhile, writers of Web pages were complaining that they didn't have enough influence over how their pages looked. One of the first questions from an author new to the Web was how to change fonts and colors of elements.

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"Meanwhile, writers of Web pages were complaining that they didn't have enough influence over how their pages looked. One of the first questions from an author new to the Web was how to change fonts and colors of elements.

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Marc Andreessen

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Marc Andreessen

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Marc Andreessen

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Marc Andreessen

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Marc Andreessen

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Marc Andreessen

Second Approach

Bolted on top of existing functionality

Vendor Prefixes

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

-webkit-

-moz-

-o-

-ms-

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

"Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process. Web developers included prefixed features on production websites, despite their experimental nature."

Vendor Prefix

MDN (https://developer.mozilla.org/)

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

div {
  -webkit-transition: all 4s 
  -moz-transition: all 4s ease;

  transition: all 4s ease; 
}
div {
  -webkit-transition: all 4s 
  -moz-transition: all 4s ease;


}

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes

div {
  -webkit-transition: all 4s 
  -moz-transition: all 4s ease;

  transition: all 4s ease; 
}
div {
  -webkit-transition: all 4s 
  -moz-transition: all 4s ease;


}

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes go 

div {
  -webkit-touch-callout: revert-layer;
  -webkit-box-reflect: above;
  -moz-orient: horizontal;
  -moz-image-region: rect(0, 8px, 4px, 4px);
  -webkit-text-security: disc;
}
div {
  display: -ms-grid;
  -webkit-box-reflect: below 5px url(mask.png);
  -webkit-font-feature-settings: "liga" off, "dlig";
  -o-backdrop-filter: saturate(1.8) blur(20px);
}

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

Vendor Prefixes go 💀

Vendor Prefix

MDN (https://developer.mozilla.org/)

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

/* Only supported in some browsers */
option:checked {
  font-weight: bold;
}
div {
  -webkit-transition: all 4s 
  -moz-transition: all 4s ease;


}

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

/* Only supported in some browsers */
option:checked {
  font-weight: bold;
}
div {
  -webkit-transition: all 4s 
  -moz-transition: all 4s ease;


}

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused
  • Consider assistive technologies

The Nuclear Option

select

option

<div>

Third Approach

Rethinking existing precedent

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused
select {
  appearance: none;
}

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused
select {
  appearance: none;
}

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused
select {
  appearance: none;
}

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused
select {
  appearance: none;
}

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused
select {
  appearance: none;
}

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused

Tricky Situation

The painted-in corner

  • Problem bigger than only select
  • Radical backwards compatibility
  • Strong established precedent 
  • Vendor prefixes were abused

Håkon Wium Lie and Bert Bos

Cascading Style Sheets, designing for the Web (1999)

"This excerpt from a message sent to the www-talk mailing list early in 1994, gives a sense of the tensions between authors and implementors:"

"It's not a bug -- it's a rendering choice made by the browser. As we kneel before the altar of the "ha ha, you can't control what your documents look like in HTML" philosophy. [...] What can you do about it? Probably nothing. Isn't that cheery news? I think so. In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to -- strap yourselves in, here it comes -- control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: "Sorry, you're screwed."

<selectedcontent>

Made with Slides.com