Skip to content

Commit 85a7f29

Browse files
authored
site: Update FAQs to latest official CSS syntax (#220)
1 parent 0d5d232 commit 85a7f29

File tree

1 file changed

+10
-20
lines changed

1 file changed

+10
-20
lines changed

site/src/components/FAQs.tsx

+10-20
Original file line numberDiff line numberDiff line change
@@ -203,30 +203,21 @@ const FAQs = () => {
203203
<Question q="What can browser vendors do to make this easier?">
204204
<Stack spacing={4}>
205205
<Text>
206-
Going forward, it would be great if this power was built into the
207-
platform and able to be applied through standard CSS properties.
206+
Over time more of Capsize&rsquo;s text trimming capabilities are
207+
being built into the browsers and available using standard CSS
208+
properties.
209+
</Text>
210+
<Text>
208211
The{' '}
209212
<Link
210213
textDecoration="underline"
211-
href="https://twitter.com/csswg"
214+
href="https://caniuse.com/?search=text-box"
212215
target="_blank"
213216
>
214-
CSS Working Group
217+
text-box
215218
</Link>{' '}
216-
have a specification proposal to make this available natively in
217-
CSS (see{' '}
218-
<Link
219-
textDecoration="underline"
220-
href="https://github.com/w3c/csswg-drafts/issues/3240"
221-
target="_blank"
222-
>
223-
Leading control at start/end of block
224-
</Link>
225-
).
226-
</Text>
227-
<Text>
228-
With this specification, the CSS required for trimming the line
229-
box would be:
219+
CSS property is now being implemented, meaning the required CSS
220+
for trimming the line box to cap height would be:
230221
<Code
231222
display="block"
232223
background="transparent"
@@ -236,8 +227,7 @@ const FAQs = () => {
236227
>
237228
{css`
238229
.capsizedText {
239-
text-box-edge: cap alphabetic;
240-
text-box-trim: both;
230+
text-box: trim-both cap alphabetic;
241231
}
242232
`}
243233
</Code>

0 commit comments

Comments
 (0)