[css-ui-4] Fixed grammar and spelling mistakes (#11407)

css-ui-4/Overview.bs

@@ -615,13 +615,13 @@ Resizing Boxes: the 'resize' property</h3>
 	The effect of the 'resize' property on generated content is undefined.
 	Implementations should not apply the 'resize' property to generated content.
 
-	Note: the 'resize' property may apply to generated content in the future
+	Note: The 'resize' property may apply to generated content in the future
 	if there is implementation of <a href="https://drafts.csswg.org/css-pseudo/#CSSPseudoElement-interface">Interface CSSPseudoElement</a>.
 
 	When an element is resized by the user,
 	the user agent sets
 	the 'width' and 'height' properties
-	to px unit length values of the size indicated by the user,
+	to px unit length values of the size indicated by the user
 	in the element’s <a href="https://www.w3.org/TR/css-style-attr/#style-attribute">style attribute</a> DOM,
 	replacing existing property declaration(s), if any,
 	without ''!important'', if any.
@@ -631,15 +631,15 @@ Resizing Boxes: the 'resize' property</h3>
 
 	The precise direction of resizing
 	(i.e. altering the top-left of the element or altering the bottom-right)
-	may depend on a number of CSS layout factors
+	may depend on a number of CSS layout factors,
 	including whether the element is absolutely positioned,
 	whether it is positioned using the 'right'
 	and 'bottom' properties,
 	whether the language of the element is right-to-left etc.
 	The UA should consider the direction of resizing
 	(as determined by CSS layout),
-	as well as platform conventions and constraints when deciding
-	how to convey the resizing mechanism to the user.
+	as well as platform conventions and constraints,
+	when deciding how to convey the resizing mechanism to the user.
 
 	The user agent must allow the user to resize the element
 	with no other constraints than what is imposed by
@@ -794,7 +794,7 @@ Styling the Cursor: the 'cursor' property</h4>
 					Note: The CSS Working Group initially intended support for all SVG,
 					naturally sized or not.
 					Support for non-naturally sized SVG was downgraded from mandatory to optional due
-					to lack of implementations.
+					to a lack of implementations.
 
 					Note: For a number of years,
 					the only file formats supported for cursors in common desktop browsers were
@@ -897,7 +897,7 @@ Styling the Cursor: the 'cursor' property</h4>
 				via the <a lt="User-Agent Origin">UA stylesheet</a>,
 				using a normal (i.e. not ''!important'') declaration.
 
-				Authors should use pointer on links and may use on other interactive elements.
+				Authors should use pointer on links and may use it on other interactive elements.
 
 			<dt style="cursor:progress"><dfn>progress</dfn>
 			<dd>
@@ -940,7 +940,7 @@ Styling the Cursor: the 'cursor' property</h4>
 
 			<dt style="cursor:vertical-text"><dfn>vertical-text</dfn>
 			<dd>
-				Indicates vertical-text that may be selected.
+				Indicates vertical text that may be selected.
 				Often rendered as a horizontal I-beam.
 		</dl>
 
@@ -1019,7 +1019,7 @@ Styling the Cursor: the 'cursor' property</h4>
 
 			<dt style="cursor:all-scroll"><dfn>all-scroll</dfn>
 			<dd>
-				Indicates that the something can be scrolled in any direction.
+				Indicates that something can be scrolled in any direction.
 				Often rendered as arrows pointing up, down, left, and right with a dot in the middle.
 		</dl>
 
@@ -1030,8 +1030,8 @@ Styling the Cursor: the 'cursor' property</h4>
 				<span style="cursor:zoom-in"> <dfn>zoom-in</dfn></span>,
 				<span style="cursor:zoom-out"> <dfn>zoom-out</dfn></span>
 			<dd>
-				Indicates that something can be zoomed (magnified) in or out,
-				and often rendered as a magnifying glass with a "+" or "-" in the center of the glass,
+				Indicates that something can be zoomed (magnified) in or out.
+				Often rendered as a magnifying glass with a "+" or "-" in the center of the glass,
 				for ''zoom-in'' and ''zoom-out'' respectively.
 		</dl>
 	</dl>
@@ -1053,7 +1053,7 @@ Styling the Cursor: the 'cursor' property</h4>
 		to the next value and attempt to use the "hyper.cur" cursor.
 		If that cursor format was also not supported,
 		the UA could attempt to use the "hyper.png" cursor with the explicit hotspot.
-		Finally if the UA cannot load any of those image cursors, the UA would skip to the last value
+		Finally, if the UA cannot load any of those image cursors, the UA would skip to the last value
 		and render the ''pointer'' cursor.
 	</div>
 
@@ -1104,7 +1104,7 @@ Coloring the Insertion Caret: the 'caret-color' property</h4>
 
 			Note: When 'caret-shape' is ''caret-shape/block'',
 			ensuring good visibility and contrast
-			is best achieved with a UA determined color other than ''currentColor''.
+			is best achieved with a UA-determined color other than ''currentColor''.
 
 		<dt><<color>>
 		<dd>
@@ -1167,7 +1167,7 @@ Animation of the insertion caret: 'caret-animation'</h4>
 		<dd>
 			The UA must not animate the caret.
 
-			Note: This is only about UA driven animations of the caret.
+			Note: This is only about UA-driven animations of the caret.
 			When CSS animations are used to animate the caret color,
 			they apply normally.
 	</dl>
@@ -1197,7 +1197,7 @@ Animation of the insertion caret: 'caret-animation'</h4>
 	UAs that do not have an editable user stylesheet
 	should provide a setting to disable
 	<a href="https://www.w3.org/TR/WCAG20/#blinksdef">blinking</a>,
-	<a href="https://www.w3.org/TR/WCAG20/#flash-def">flashing</a>
+	<a href="https://www.w3.org/TR/WCAG20/#flash-def">flashing</a>,
 	and animated carets.
 	UAs that do have an editable user stylesheet may want to provide this setting as well.
 	See [[WCAG]] <a href="https://www.w3.org/TR/WCAG20/#time-limits-pause">Guideline 2.2</a>
@@ -1435,7 +1435,7 @@ Shape of the insertion caret: 'caret-shape'</h4>
 	Omitted values are set to their initial values.
 
 	<div class=example>
-		This example illustrates using the various caret related properties
+		This example illustrates using the various caret-related properties
 		in combination.
 		They are used here to simulate the appearance of the caret
 		on an old phosphor computer monitor.
@@ -1616,7 +1616,7 @@ Directional Focus Navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left'
 <h4 id="input-method-editor">
 Obsolete: the ime-mode property</h4>
 
-	''ime-mode'' is a property somewhat implemented in some browsers,
+	''ime-mode'' is a property somewhat implemented in some browsers
 	that is problematic and officially obsoleted by this specification
 	and its predecessor [[CSS-UI-3]].
 
@@ -1627,7 +1627,7 @@ Obsolete: the ime-mode property</h4>
 
 	Authors must not use the ime-mode property.
 
-	Users may use the ime-mode property only for repair use-cases
+	Users may use the ime-mode property only for repair use cases
 	where they have to work around bad sites and legacy implementations,
 	e.g. with a user style sheet rule like:
 	<div class="example">
@@ -1696,7 +1696,7 @@ Controlling content selection</h3>
 	<em>This feature is at risk.</em>
 
 	Issue: if we allow user-select to change to a value other than ''user-select/none'',
-	we need to figure out what this means for copyability, and DOM APIs.
+	we need to figure out what this means for copyability and DOM APIs.
 
 	When generated content in pseudo-elements becomes selectable
 	through this mechanism,
@@ -1717,7 +1717,7 @@ Controlling content selection</h3>
 
 		<li>
 			when the [=computed value=] is ''user-select/auto'',
-			in which case the [=used value=] one of the other values as defined below
+			in which case the [=used value=] is one of the other values as defined below
 	</ol>
 
 	For the purpose of this specification,
@@ -1763,7 +1763,7 @@ Controlling content selection</h3>
 			Note: This unusual combination of a non-inherited property with an initial value of ''user-select/auto''
 			whose used value depends on the parent element
 			makes it possible to create what is effectively selective inheritance.
-			This was initially proposed by Microsoft in IE to introduce a behavior similar to inheritance
+			This was initially proposed by Microsoft in IE to introduce a behavior similar to inheritance,
 			except that the ''user-select/contain'' value does not inherit.
 
 		<dt><dfn>text</dfn>
@@ -1781,19 +1781,19 @@ Controlling content selection</h3>
 			Note: As of the time of writing, experimental implementations do not all behave like this.
 			Firefox does.
 			Chrome and Safari almost do: for a selection started after the element
-			and trying to go backwards into the element
+			and trying to go backwards into the element,
 			they behave as specified here,
 			but for a selection started before the element
-			and trying to go into the element
+			and trying to go into the element,
 			they behave as if the element has ''all'' and select it entirely.
 			IE does not restrict selections started outside of the element
 			from going into it at all.
 			Another difference is that in Chrome and Safari,
 			if the user attempts to start a selection inside a ''user-select: none'',
 			and to end the selection out of it,
 			a selection will be created from the boundary of the element
-			to the user-designated end-point.
-			Firefox and Internet explorer behave as prescribed in this specification
+			to the user-designated end point.
+			Firefox and Internet Explorer behave as prescribed in this specification
 			and do not create a selection at all.
 
 			However, if this element has descendants on which the [=used value=] of 'user-select' is not ''user-select/none'',
@@ -1807,7 +1807,7 @@ Controlling content selection</h3>
 			these descendants must be included in a selection extending across the element.
 			<span class=note>This specification makes no normative requirement
 			about the behavior of the clipboard.
-			however, UAs are encouraged to keep the visual selection consistent
+			However, UAs are encouraged to keep the visual selection consistent
 			with what would get copied to the clipboard when copying.
 			Copying text that does not appear to be selected, or vice versa,
 			is highly confusing to users.</span>
@@ -1828,10 +1828,10 @@ Controlling content selection</h3>
 			and the user can disable it through the user style sheet or equivalent mechanisms
 			on UAs that do anyway.
 			Instead, ''user-select/none'' is meant to
-			make it easier for the user to select the content they want,
+			make it easier for the user to select the content they want
 			by letting the author disable selection on UI elements
 			that are not useful to select.
-			Tools such as CSS validators, linters or in-browser developer tools
+			Tools such as CSS validators, linters, or in-browser developer tools
 			are encouraged to use heuristics
 			to detect and warn against incorrect or abusive usage
 			that would hamper usability
@@ -1892,7 +1892,7 @@ Controlling content selection</h3>
 	</dl>
 
 	Note: Selections can include more than just text and extend over images, tables, videos, etc.
-	The behavior when copying and pasting a such selections is out of scope for this specification.
+	The behavior when copying and pasting such selections is out of scope for this specification.
 
 	The following additions are made to the UA stylesheet for HTML:
 	<pre><code class="lang-css">
@@ -1909,7 +1909,7 @@ Controlling content selection</h3>
 	Making ''-webkit-user-select'' a shorthand property of 'user-select'
 	is known to be an effective approach,
 	and new implementers should consider it.
-	However, UAs supporting ''-webkit-user-select'' as an alias of 'user-select' through other means exist,
+	However, UAs supporting ''-webkit-user-select'' as an alias of 'user-select' through other means exist
 	without adverse consequences to compatibility,
 	so this specification allows flexibility.
 
@@ -1951,9 +1951,9 @@ Exclusion from Hit-testing: the 'pointer-events' property</h3>
 			(see [[CSS-DISPLAY-3]])
 			were not there,
 			effectively causing the element behind the ''pointer-events: none'' element
-			to become the target of [=hit-testing=] based events instead.
+			to become the target of hit-testing-based events instead.
 
-			Issue: The statement above needs to be be qualified;
+			Issue: The statement above needs to be qualified;
 			for some purposes,
 			hit-testing continues to take the element into account.
 			For instance, clicking and dragging to start a text selection will continue to work as usual.
@@ -2159,7 +2159,7 @@ Switching appearance: the 'appearance' property</h3>
 	have the same styles.
 
 	ISSUE: ''appearance:base'' is not ready to ship until its stylesheet has been
-	fully defined in the HTML specification, and implemented accordingly, for all
+	fully defined in the HTML specification, and implemented accordingly for all
 	HTML form controls.
 
 	<details class=note>
@@ -2447,7 +2447,7 @@ Effects of 'appearance' on Decorative Aspects of Elements</h4>
 	<div class=example>
 		For example, the [[HTML]] <{select}> element is often rendered with an arrow on the right side
 		indicating that the list will be expanded if the element is clicked.
-		If the computed value of 'appearance' on a <{select}> element is ''appearance/none''
+		If the computed value of 'appearance' on a <{select}> element is ''appearance/none'',
 		this must disappear.
 	</div>
 
@@ -2458,13 +2458,13 @@ Effects of 'appearance' on Decorative Aspects of Elements</h4>
 	they intended.
 
 	<div class=advisement>
-		Authors may find it convenient to use ''all: unset'',
+		Authors may find it convenient to use ''all: unset''
 		to get fully unstyled <a>widgets</a>,
 		which they can then style as they want without interference from the user agent's stylesheet.
 		However, this also suppresses the focus indicators provided by the same UA stylesheet.
 		In order to avoid damaging accessibility,
 		authors who do so should restore a focus indicator,
-		for instance by using '':focus-visible { outline: auto; }''.
+		for instance, by using '':focus-visible { outline: auto; }''.
 	</div>
 
 
@@ -2475,7 +2475,7 @@ Effects of 'appearance' on Semantic Aspects of Elements</h4>
 	or its [=devolved=] state,
 	user agents must preserve aspects of the <a>widget</a>
 	which are necessary to operate the <a>widget</a> with its original semantics.
-	The UA may however give them a different look and feel
+	The UA may, however, give them a different look and feel
 	as long as it remains possible to operate the <a>widget</a>.
 	Aspects of a <a>widget</a> which are merely needed to observe the state the <a>widget</a> is in
 	and are not needed to operate it
@@ -2557,9 +2557,9 @@ Switching form control sizing: the 'field-sizing' property</h3>
 		<dt><dfn>fixed</dfn>
 		<dd>
 			For [=element with default preferred size=],
-			the UA must apply set the [=intrinsic size=]
+			the UA must set the [=intrinsic size=]
 			to the default preferred size defined by the host language for that element.
-			Otherwise UA must behave the same as ''field-sizing/content''.
+			Otherwise, the UA must behave the same as ''field-sizing/content''.
 		<dt><dfn>content</dfn>
 		<dd>
 			The UA must determine the element's [=intrinsic size=] based on its content,
@@ -2570,7 +2570,7 @@ Switching form control sizing: the 'field-sizing' property</h3>
 	</dl>
 
 	<div class="example">
-		For instance, <{textarea}> has fixed size regardless of its content by default:
+		For instance, <{textarea}> has a fixed size regardless of its content by default:
 
 		<span class="fake-textarea auto">&#x23B8;</span>
 		<span class="fake-textarea auto">The quick brown fox jumps over the lazy dog.</span>
@@ -2588,14 +2588,14 @@ Switching form control sizing: the 'field-sizing' property</h3>
 <h3 id="input-security">
 Obscuring sensitive input: the 'input-security' property</h3>
 
-	Issue: The CSS-WG has agreed that
-	while be believe that providing this piece of functionality to users is important,
+	Issue: The CSSWG has agreed that
+	while we believe that providing this piece of functionality to users is important,
 	doing it via CSS+JS is the wrong approach,
 	and that instead it should be built into user agents:
 	this needs to work consistently from site to site for it to be discoverable and understandable by users,
 	this needs to work even when JS is turned off,
-	this needs to have consistently solid accessibility…
-	We therefore intend to remove this from the specification
+	and this needs to have consistently solid accessibility…
+	We therefore intend to remove this from the specification,
 	and instead, we would like to see this behavior specified in the HTML specification
 	as part of the interaction model of password fields.
 	Holding off deleting until the situation with HTML is clarified.
@@ -2658,7 +2658,7 @@ Obscuring sensitive input: the 'input-security' property</h3>
 
 
 <h3 id=control-specific-rules>
-Control Specific Rules</h3>
+Control-Specific Rules</h3>
 
 	Issue: Maybe some or all of this section
 	should be moved to the [[HTML]] spec.
@@ -2844,7 +2844,7 @@ Changes from the <a href="https://www.w3.org/TR/2017/WD-css-ui-4-20171222/">22 D
 	the following normative changes have been made:
 
 	<ul>
-		<li>Added details about form control specific rendering rules
+		<li>Added details about form control-specific rendering rules
 		<li>Clarify interaction between text-overflow and anonymous block containers
 		<li>Require the ''cursor/pointer'' cursor for hyperlinks in all document formats
 		<li>Moved the 'box-sizing' and 'text-overflow' properties to [[CSS-SIZING-3]] and [[CSS-OVERFLOW-4]] respectively.
@@ -2878,7 +2878,7 @@ Changes from the <a href="https://www.w3.org/TR/2015/WD-css-ui-4-20150922/">22 S
 			Move directional focus navigation properties from level 3 to level 4
 
 		<li>
-			Content from the now stable [[CSS-UI-3]] has been merged in.
+			Content from the now-stable [[CSS-UI-3]] has been merged in.
 	</ul>