forked from w3c/csswg-wiki
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
106 lines (105 loc) · 6.13 KB
/
Copy pathindex.html
File metadata and controls
106 lines (105 loc) · 6.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minor Principles of Design - CSS Working Group Wiki (Archive)</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 900px; margin: 0 auto; padding: 1.5em 1em; line-height: 1.6;
color: #1f2328; background: #fff;
}
.archive-banner {
background: #fff8c5; border: 1px solid #d4a72c; border-radius: 6px;
padding: 0.75em 1em; margin-bottom: 1.5em; font-size: 0.9em;
}
.archive-banner strong { color: #6e5600; }
header { border-bottom: 1px solid #d1d5db; padding-bottom: 1em; margin-bottom: 1.5em; }
header h1 { margin: 0; font-size: 1.25em; }
header h1 a { color: #0366d6; text-decoration: none; }
header h1 a:hover { text-decoration: underline; }
nav { margin-top: 0.5em; font-size: 0.9em; }
nav a { color: #656d76; text-decoration: none; margin-right: 1em; }
nav a:hover { color: #0366d6; }
h1, h2, h3, h4 { color: #1f2328; margin-top: 1.5em; }
h1:first-child { margin-top: 0; }
a { color: #0366d6; }
code { background: #f6f8fa; padding: 0.15em 0.3em; border-radius: 3px; font-size: 0.9em; }
pre { background: #f6f8fa; padding: 1em; overflow: auto; border-radius: 6px; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; margin: 1em 0; }
th, td { border: 1px solid #d1d5db; padding: 0.4em 0.8em; }
th { background: #f6f8fa; }
img { max-width: 100%; }
.breadcrumb { font-size: 0.85em; color: #656d76; margin-bottom: 1em; }
.breadcrumb a { color: #656d76; }
ul, ol { padding-left: 1.5em; }
li { margin: 0.25em 0; }
.plugin_note { background: #f0f4f8; border-left: 4px solid #0366d6; padding: 0.75em 1em; margin: 1em 0; border-radius: 3px; }
abbr { text-decoration: underline dotted; cursor: help; }
@media (prefers-color-scheme: dark) {
body { background: #0d1117; color: #e6edf3; }
.archive-banner { background: #3d2e00; border-color: #6e5600; }
.archive-banner strong { color: #f0c000; }
header { border-bottom-color: #30363d; }
header h1 a { color: #58a6ff; }
nav a { color: #8b949e; }
nav a:hover { color: #58a6ff; }
h1, h2, h3, h4 { color: #e6edf3; }
a { color: #58a6ff; }
code, pre { background: #161b22; }
th, td { border-color: #30363d; }
th { background: #161b22; }
.breadcrumb, .breadcrumb a { color: #8b949e; }
.plugin_note { background: #161b22; border-color: #58a6ff; }
}
</style>
</head>
<body>
<div class="archive-banner">
<strong>Archive Notice:</strong> This is a read-only archive of the CSS Working Group Wiki.
The original wiki was hosted at wiki.csswg.org.
</div>
<header>
<h1><a href="/">CSS Working Group Wiki</a></h1>
<nav>
<a href="/">Home</a>
<a href="/spec/">Specs</a>
<a href="/ideas/">Ideas</a>
<a href="/test/">Testing</a>
<a href="/wiki/">About</a>
</nav>
</header>
<div class="breadcrumb"><a href="/">Home</a> / <a href="/ideas/">ideas</a> / principles</div>
<main>
<h1 id="minor-principles-of-design">Minor Principles of Design</h1>
<dl class="plugin_definitionlist">
<dt><span class="term"> Transparency Principle</span></dt>
<dd> Inserting an unstyled block in a block formatting context (as sibling, parent, child or intermediary) / unstyled inline in an inline formatting context should have no effect on styling.</dd>
<dt><span class="term"> Lea Verou Reordering Principle</span></dt>
<dd> If it can be unambiguously reordered, it should be reorderable.</dd>
<dt><span class="term"> Pass-through Auto-sizing Principle</span></dt>
<dd> `auto` as a size generally passes down any min/max-content constraints, and passes up through it the min/max-content contribution</dd>
<dt><span class="term"> Resolved Values Round-Trip Principle</span></dt>
<dd> If you write the result of <code>getComputedStyle()</code> back into the property, the resulting rendering of that element (inheritance aside) should remain stable.</dd>
<dt><span class="term"> DBaron's Degrees of Freedom Caveat</span></dt>
<dd> When the platform has too many degrees of freedom in it, developers aren't able to test what they're doing well enough. [This results in buggy web pages, particularly on minority systems, and is therefore bad.]</dd>
<dt><span class="term"> fantasai Principle of Proper Resilience</span></dt>
<dd> We try to make sure behavior is good by default, and resilient in weird cases. We do not choose bad behavior by default because it's the most straightforward way to be resilient.</dd>
<dt><span class="term"> Jen Simmons Tooling Principle</span></dt>
<dd> Any feature that requires everyone to use a certain toolchain to be usable is a design failure.</dd>
<dt><span class="term"> Considerations for Restrict Longhand Values in a Shorthand</span></dt>
<dd> whether the value introduces ambiguity</dd>
<dd> whether the value could in the future introduce ambiguity (and therefore we need to reserve the keyword for other purposes)</dd>
<dd> whether the value is readable / understandable in the shorthand</dd>
<dd> the above considerations vs the baseline pattern that all longhand values should be valid in the shorthand</dd>
<dt><span class="term"> Roc Principle of Spec-writing</span></dt>
<dd> If Robert O'Callahan is unhappy with your <abbr title="specification">spec</abbr>, you're the one who's wrong.</dd>
</dl>
<div class="plugin_note notetip">See also <a href="https://www.w3.org/TR/CSS2/intro.html#design-principles" title="https://www.w3.org/TR/CSS2/intro.html#design-principles" rel="noopener">CSS2 Design Principles</a>, <a href="http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/#principles" title="http://fantasai.inkedblade.net/weblog/2012/css-layout-evolution/#principles" rel="noopener">Evolution of CSS Layout: Principles</a>, & <a href="http://fantasai.inkedblade.net/style/talks/designing-css/" title="http://fantasai.inkedblade.net/style/talks/designing-css/" rel="noopener">Designing CSS slide deck</a> & <a href="http://fantasai.inkedblade.net/weblog/2019/designing-css/" title="http://fantasai.inkedblade.net/weblog/2019/designing-css/" rel="noopener">partial transcript</a> for higher-level design principles.
</div>
</main>
</body>
</html>