Bert Bos |
Why standards? + CSS topics
Why standards? & current CSS topics
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Some notes on standards,
W3C process
and
Web document design + current issues for CSS
Bert Bos (W3C) <bert@w3.org>
DTO
Canberra, Australia
4 February 2016
About me (2/2)
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
I am a member of the W3C team:
- 78
- Hosts
- France – Sophia-Antipolis (ERCIM) ← me 43.6145° 7.0695°
- USA – Cambridge, MA (MIT)
- Japan – Tokyo (Keio Univ.)
- China – Beijing (Beihang Univ.)
- … and colleagues all over the world
- Technical, administrative/management, systems support
Why use W3C standards?
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
- Wide input & review
- international
- combines industry & research
- mobile, entertainment, IoT/WoT,
publishing, automotive, payments…
- Widely tested
- Implemented
- Common architecture
- Specifications freely available
Open process
- Royalty-free
- Possibility to make ISO standards
- W3C has a good track record, large & active community
Open Web Platform
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Why build on the OWP?
- Application environment for applications that are
- interactive,
- cross-platform: desktop,
mobile, TV, smart
watch, camera, smart
things…
- Same formats & APIs for cloud-based
(browser-based) and locally installed applications
Guidelines for publishing data
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
W3C is working on guidelines for making (public) data as useful
as possible:
Join the respective Working Groups to help complete these!
Good Web design
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
My personal(!) priorities:
- Make it readable without CSS, JavaScript & cookies
- Keep the CSS small
- Design for a small screen, but don't waste space on a big one
- Apply WCAG
- Allow pages to be bookmarked
Details below…
Readable without CSS, JS & cookies
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
- Use HTML elements according to their semantics
- Tables aren't evil… as long as you use them for tabular data
- If the page has a big navigation menu, either
- put it at the end of the source
(maybe with a small menu at the top) or
- put a “jump to contents” link before it
(Test with lynx, w3m, or with CSS turned off)
Design for small screens,
but don't waste space
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
If it's readable on a small screen, e.g.,
- phone,
- small window or
- big fonts
it will be readable on a big one.
But you can add Media Queries
to use more space if available
Don't waste space!
- Don't set a 'max-width' on the BODY
- Don't use fixed widths or fixed font sizes
@media all and (min-width: 50em) {...}
Keep the CSS small
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Many “CSS Frameworks” are very big, do you need hundreds of KB of CSS?
My experience: 10 KB enough for a complex style; simple pages
need just a handful of style rules
Don't “minify”! Let other people read, override and steal
your styles!
Use shorthand properties (also makes it future-proof: if new,
related features are added, the shorthand is likely to set them
correctly automatically)
Apply WCAG
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
- Perceivable: text alternatives for images/video, enough contrast…
- Operable: allow keyboard operation, slow down or halt animations…
- Understandable: pages behave predictably, helpful error messages…
- Robust: allow for old & future software…
This slide cannot replace
reading WCAG!
Allow pages to be bookmarked
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
If a page is interesting, people probably want to:
- View it with a different browser or device
- Come back to it later
- Share it with people
So:
- No session IDs in URLs
- Don't depend on cookies
- No pages that time out
W3C process
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
| Instrument
| Goal
| Participation
| Effort
| Staff support
|
| Community Group
| Forum, white papers, or prep. for WG
| Everybody
| Low (e-mail)
| No support
|
| Business Group
| Forum, white papers, or prep. for WG
| Everybody, annual fee
| Low (e-mail)
| Staff support
|
| IG
| Forum, W3C Notes, support WGs
| W3C Member
| Medium (e-mail, telcons)
| Staff support
|
| WG
| Standards (W3C Recommendations)
| W3C Member
| High (e-mail, telcons, ftf)
| Staff support
|
A typical Working Group
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
- Weekly 1-hour teleconferences
- A known problem for Australians…
- E-mail
- Public mailing list: open technical discussions
- Member-only list: scheduling, administration…
- 3 or 4 face-to-face meetings per year:
- one at TPAC (2016 = Lisbon, Sep; 2017 = USA, Nov?)
- others hosted by WG members
A look at CSS
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
A selection of current topics in the CSS WG:
- Round displays
- Visual vs logical order and navigation
- Paginated displays (including paper)
- Low-level APIs (Houdini)
Round displays
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Everything in CSS based on rectangular boxes… sofar
New non-rectangular displays, in particular round ones (watches)
- Round elements with shortened lines
- Round borders (≠ rounded corners)
- Positioning with polar coordinates (angle + distance)
- Media Queries to find out whether the screen is round
Visual order and navigation
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Problem existed already with floats
Reordering is now even easier with Flexbox
Navigating without the visual style applied: logical order
Navigating after the visual style is applied: visual order? or not?
Paginated displays
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Paged display of documents
- paged only (e.g., for paper), or
- paged and scrolled mixed (for interactive devices)
Several devices and applications:
- E-book readers
- PDF formatters: AH
Formatter, Prince, PDFREactor,
Vivliostyle…
Digital publishing
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
CSS WG getting help from Digital Publishing IG
(Of course, Digital Publishing involves more than just layout:
metadata, process, offline reading (EPUB), etc.)
Features for paginated displays
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
- Page numbers, running headers
- Images at top, bottom or full-page
- Cross-references (“See page 17”)
- (Good) page breaks
- Table of contents, indexes
- Page spreads (facing pages)
- Footnotes
- Page templates (page grid)
- Higher quality justification
- …
Low-level APIs: Houdini
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
JS access to internals of browser engines:
- Box tree
- Painting & compositing
- Font metrics
- States (events)
- Scrolling
- Parsing, cascading, inheritance
- …
Houdini goals
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
Should eventually allow to replace/enhance:
- Scrolling behavior
- Line breaking & justification
- Math layout
- … Even a different style sheet language?
)
Maybe not the most elegant application environment, but investment in it is not likely to become obsolete, when, e.g., a certain device or platform disappears.
The same HTML, CSS, PNG, SVG, APIs, etc. are used for Web pages/applications viewed in browsers and applications in cameras, TVs, e-book readers or smart watches.