Skip to content

Commit aa54d7a

Browse files
committed
[css-forms-1] Remove explorations appendix from spec
1 parent 148dda6 commit aa54d7a

File tree

5 files changed

+2
-169
lines changed

5 files changed

+2
-169
lines changed

css-forms-1/Overview.bs

+2-169
Original file line numberDiff line numberDiff line change
@@ -908,174 +908,6 @@ select::picker-icon {
908908
block-start span-inline-start;
909909
}
910910
```
911-
<h2 class="no-num non-normative" id="explorations">Appendix B: Explorations</h2>
912-
913-
## Basic Styling Proposals ## {#ideas}
914-
915-
This section sketches a few proposals for solving the form styling problem.
916-
917-
### Prototypes ### {#prototypes}
918-
919-
This idea, originally suggested by fantasai,
920-
is that we can style a handful of "prototype" elements.
921-
Browser UI designers can then take the styling of those elements
922-
and extrapolate the design into their own UIs.
923-
At minimum, things like text, backgrounds, and borders can be used.
924-
At the limit, things like internal padding, border-radius, etc might be used.
925-
926-
<pre class='lang-css'>
927-
@control button {
928-
&lt;declaration-list>
929-
}
930-
931-
@control input {
932-
&lt;declaration-list>
933-
}
934-
935-
input::selection {
936-
&lt;declaration-list>
937-
}
938-
939-
...
940-
</pre>
941-
942-
<blockquote cite="https://lists.w3.org/Archives/Public/www-style/2015Jan/0490.html">
943-
You would be able to use styles for:
944-
945-
* font selection (css-fonts)
946-
* text decoration (css-text-decor)
947-
* text layout (css-text)
948-
* backgrounds & drop-shadow (css-backgrounds)
949-
* borders & padding (css-backgrounds)
950-
* filters
951-
* anything else we or a UA decides seems relevant
952-
953-
Most form controls, even a calendar widget or clock, are a combination of
954-
these three primitives in some way. If the UA is given the styling for
955-
these three primitives, and perhaps one or two more it can figure out how
956-
to style the rest.
957-
958-
For example, a calendar widget might have the month, the year, some buttons
959-
to move them around, the ability to click into them and edit them directly,
960-
and a representation of the days of the month. The selected day is selected.
961-
Perhaps the buttons only show up on :hover or :focus -- the UA decides. But
962-
it knows that a button should be this particular shade of blue with that
963-
particular border-radius and drop-shadow. The calendar might be shown in the
964-
colors of the input field, and the selected day in the selection color, and
965-
in all ways it will match the way the input fields look in the rest of the
966-
page.
967-
968-
Now, the author can't decide, for example, the spacing between the year
969-
and the month name, or whether the button to change years has a solid
970-
arrow or a hollow arrow or a frilly one, and she can't decide that there
971-
should be a black solid half-border between the month and the day field
972-
below it with 5px spacing. But the calendar will look like it belongs to
973-
the page, and the UA can come up with a different calendar layout when it
974-
ships one on a wide but short smart watch where the month and year are
975-
better placed on the side without breaking anything.
976-
</blockquote>
977-
978-
<div class='example'>
979-
<img src=images/time01.png alt="iOS time picker">
980-
981-
<blockquote cite="https://lists.w3.org/Archives/Public/www-style/2015Jan/0622.html">
982-
The black area is the button color; a very light transparency of it
983-
can be the glass color. The rollers are the input colors.
984-
</blockquote>
985-
</div>
986-
987-
<div class='example'>
988-
<img src=images/time02.png alt="Android time picker">
989-
990-
<blockquote cite="https://lists.w3.org/Archives/Public/www-style/2015Jan/0622.html">
991-
It's hard to tell without more context, but for the one on the right,
992-
the clock face and the digital readout are @input colors, the highlighted
993-
bits are the highlight color, the Done button is the button styling,
994-
and the shaded area around the clock face is the same color as the
995-
button background.
996-
</blockquote>
997-
</div>
998-
999-
1000-
### Inverse System Colors ### {#inverse-system}
1001-
1002-
This idea, originally sketched by Florian and Tab,
1003-
is to define an abstract set of colors
1004-
that UI designers can then choose from when coloring their UI.
1005-
1006-
Tab's suggested set of colors, from an Android color-extraction API proposal:
1007-
1008-
* Light/Normal/Dark Vibrant
1009-
* Light/Normal/Dark Muted
1010-
* Vibrant Complementary (for call-out buttons and such that need to be visually distinct)
1011-
1012-
(where light ~75% lightness, normal is ~50%, dark is ~25%; vibrant is
1013-
at least 30% saturation, ideally 100%, and muted is at most 40%
1014-
saturation, ideally 30%)
1015-
1016-
* Light/Dark Contrasting Text
1017-
* Light/Dark Contrasting Secondary Text
1018-
1019-
That's 11 colors, many of which should be drawable from the webpage's own color scheme.
1020-
We can auto-gen a bunch of them if you specify at least some of them,
1021-
like genning the light/dark variants from the "normal-vibrant" color,
1022-
or automatically setting text colors to white/black as appropriate.
1023-
1024-
There's no guarantee that the input UIs will use the colors in the *same way* that the rest of the page does, though.
1025-
1026-
## Miscellaneous Control-Specific Suggestions ## {#misc}
1027-
1028-
Issue: <a href="http://blog.teamtreehouse.com/use-meter-progress-elements">&lt;progress> and &lt;meter> styling</a>
1029-
1030-
Issue: Insert &lt;select> and &lt;datalist> styling proposal and/or whiteboard photo.
1031-
1032-
### Select/Datalist Dropdown ### {#select-dropdown}
1033-
1034-
1. Only allow styling if both 'color!!property' and 'background' are set.
1035-
2. Option container:
1036-
* backgrounds
1037-
* borders
1038-
* padding
1039-
3. <{option}>
1040-
* padding
1041-
* borders
1042-
* border-collapse?
1043-
* backgrounds
1044-
* display-inside is allowed, automatically blockified
1045-
* not margins, position, float, width, height
1046-
1047-
All options are contain:paint and BFCs.
1048-
1049-
1050-
## Input UI Examples ## {#ui-examples}
1051-
1052-
1053-
This section catalogues as many input UI examples as we can screenshot,
1054-
especially on mobile devices where they're a bit "weirder".
1055-
1056-
### Time Pickers ### {#time-examples}
1057-
1058-
<figure>
1059-
<img src="images/time01.png" alt="">
1060-
<figcaption>iOS time picker</figcaption>
1061-
</figure>
1062-
1063-
<figure>
1064-
<img src="images/time02.png" alt="">
1065-
<figcaption>Android time picker 1</figcaption>
1066-
</figure>
1067-
1068-
<figure>
1069-
<img src="images/time03.png" alt="">
1070-
<figcaption>Android time picker 2</figcaption>
1071-
</figure>
1072-
1073-
### Date Pickers ### {#date-examples}
1074-
1075-
<figure>
1076-
<img src="images/date01.png" alt="">
1077-
<figcaption>Android date picker</figcaption>
1078-
</figure>
1079911
1080912
<h2 class=no-num id=changes>Changes</h2>
1081913
@@ -1084,7 +916,8 @@ especially on mobile devices where they're a bit "weirder".
1084916
Public Working Draft</a> of 25 March 2025</h3>
1085917
1086918
<ul>
1087-
<li>Added !important to select buttons inertness</li>
919+
<li>Added !important to select buttons inertness.</li>
920+
<li>Removed "Appendix B: Explorations" with obsolete ideas.</li>
1088921
</ul>
1089922
1090923
<h2 class=no-num id=privacy>Privacy Considerations</h2>

css-forms-1/images/date01.png

-30.9 KB
Binary file not shown.

css-forms-1/images/time01.png

-58 KB
Binary file not shown.

css-forms-1/images/time02.png

-21.4 KB
Binary file not shown.

css-forms-1/images/time03.png

-13.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)