25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
8.5 KiB
8.5 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62017f47c87be96457c49f46 | Step 46 | 0 | step-46 |
--description--
Rather than having to constantly double-check you are not overwriting your earlier properties, you can use the !important keyword to ensure these properties are always applied, regardless of order or specificity.
Give each property in your span[class~="sr-only"] selector an !important keyword. Do not change any of the values.
--hints--
Your span[class~="sr-only"] selector should have the border property set to 0 !important.
// log it
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
Your span[class~="sr-only"] selector should have the clip property set to rect(1px, 1px, 1px, 1px) !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
Your span[class~="sr-only"] selector should have the clip-path property set to inset(50%) !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('clip-path: inset(50%) !important;'));
Your span[class~="sr-only"] selector should have the -webkit-clip-path property set to inset(50%) !important.
// this one gets removed apparently
assert(code.includes('-webkit-clip-path: inset(50%) !important;'));
Your span[class~="sr-only"] selector should have the height property set to 1px !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('height: 1px !important;'));
Your span[class~="sr-only"] selector should have the width property set to 1px !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('width: 1px !important;'));
Your span[class~="sr-only"] selector should have the position property set to absolute !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('position: absolute !important;'));
Your span[class~="sr-only"] selector should have the overflow property set to hidden !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('overflow: hidden !important;'));
Your span[class~="sr-only"] selector should have the white-space property set to nowrap !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('white-space: nowrap !important;'));
Your span[class~="sr-only"] selector should have the padding property set to 0 !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('padding: 0px !important;'));
Your span[class~="sr-only"] selector should have the margin property set to -1px !important.
const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
assert(text.includes('margin: -1px !important;'));
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Balance Sheet</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<main>
<section>
<h1>
<span class="flex">
<span>AcmeWidgetCorp</span>
<span>Balance Sheet</span>
</span>
</h1>
<div id="years" aria-hidden="true">
<span class="year">2019</span>
<span class="year">2020</span>
<span class="year">2021</span>
</div>
<div class="table-wrap">
<table>
<caption>Assets</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only year">2019</span></th>
<th><span class="sr-only year">2020</span></th>
<th class="current"><span class="sr-only year">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
<td>$25</td>
<td>$30</td>
<td class="current">$28</td>
</tr>
<tr class="data">
<th>Checking <span class="description">Our primary transactional account.</span></th>
<td>$54</td>
<td>$56</td>
<td class="current">$53</td>
</tr>
<tr class="data">
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
<td>$500</td>
<td>$650</td>
<td class="current">$728</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Assets</span></th>
<td>$579</td>
<td>$736</td>
<td class="current">$809</td>
</tr>
</tbody>
</table>
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
</tr>
<tr class="data">
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
<td>$50</td>
<td>$50</td>
<td class="current">$75</td>
</tr>
<tr class="total">
<th>Total <span class="sr-only">Liabilities</span></th>
<td>$750</td>
<td>$600</td>
<td class="current">$475</td>
</tr>
</tbody>
</table>
<table>
<caption>Net Worth</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="total">
<th>Total <span class="sr-only">Net Worth</span></th>
<td>$-171</td>
<td>$136</td>
<td class="current">$334</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</body>
</html>
--fcc-editable-region--
span[class~="sr-only"] {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
white-space: nowrap;
padding: 0;
margin: -1px;
}
--fcc-editable-region--
html {
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #0a0a23;
}
h1 {
max-width: 37.25rem;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
h1 .flex {
display: flex;
flex-direction: column-reverse;
gap: 1rem;
}
h1 .flex span:first-of-type {
font-size: 0.7em;
}
h1 .flex span:last-of-type {
font-size: 1.2em;
}
section {
max-width: 40rem;
margin: 0 auto;
border: 2px solid #d0d0d5;
}
#years {
display: flex;
justify-content: flex-end;
position: sticky;
top: 0;
background: #0a0a23;
color: #fff;
z-index: 999;
padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
margin: 0 -2px;
}
#years span[class] {
font-weight: bold;
width: 4.5rem;
text-align: right;
}
.table-wrap {
padding: 0 0.75rem 1.5rem 0.75rem;
}
span:not(.sr-only) {
font-weight: normal;
}