Ni skrivnost, da MDN uvedel nov dizajn nazaj v marcu. Čudovito je! In v njem je nekaj sladkih draguljev CSS-y, ki jih je zabavno gledati. Eden od teh draguljev je, kako komponente kartice obravnavajo okrnjeno besedilo.
Precej kul, kajne? To bi rad nekoliko raztrgal, vendar me nekaj stvari resnično pritegne k temu pristopu:
- To je primer namernega izrezovanja vsebine. To smo označili kot Izguba podatkov CSS na drugih mestih. In čeprav je izguba podatkov na splošno slaba stvar, mi je všeč, kako se tukaj uporablja, saj naj bi bili izvlečki dražljivi za celotno vsebino.
- To je drugače kot prirezovanje besedila z
text-overflow: ellipsis, tema, ki se je pojavila pred kratkim, ko je Eric Eggert deli njegove skrbi s tem. Glavni argument proti je, da ni mogoče obnoviti besedila, ki je odrezano pri prirezovanju - pomočna tehnika ga bo objavila, vendar ga videči uporabniki ne morejo obnoviti. Pristop MDN zagotavlja nekoliko več nadzora v tem oddelku, saj je prirezovanje le vizualno.
Torej, kako je MDN to naredil? Kar se tiče HTML-ja, tukaj ni nič preveč elegantnega, samo vsebnik z odstavkom.
<div class="card">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>Lahko dodamo nekaj osnovnih slogov, da okrepimo stvari.
Spet nič preveč elegantnega. Naš cilj je izrezati vsebino po, recimo, tretji vrstici. Lahko nastavimo a max-height na odstavek in za to skrijete prelivanje:
.card p {
max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
overflow: hidden; /* Cut off the content */
}Vau vau, kaj je s tem calc() stvari? Upoštevajte, da sem nastavil a --base spremenljivka spredaj, ki se lahko uporablja kot skupni množitelj. Uporabljam ga za izračun font-size, line-height, padding za kartico, zdaj pa še max-height odstavka. Lažje delam s konstantnimi vrednostmi, zlasti če velikost, ki jo potrebujem, resnično temelji na takšnem merilu. Opazil sem, da MDN uporablja podobno --base-line-height spremenljivka, verjetno za isti namen.
Ali želite tretjo vrstico besedila zbledeti? To je klasika linear-gradient() na odstavku :after psevdoelement, ki je pripet v spodnji desni kot kartice. Torej, to lahko nastavimo:
.card p:after {
content: ""; /* Needed to render the pseudo */
background-image: linear-gradient(to right, transparent, var(--background) 80%);
position: absolute;
inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}Upoštevajte, da kličem a --background spremenljivka, ki je nastavljena na isto vrednost barve ozadja, ki je uporabljena na .card sama. Tako se zdi, da besedilo zbledi v ozadju. In ugotovil sem, da moram spremeniti drugo barvno postajo v prelivu, ker besedilo ni popolnoma skrito, ko se preliv zlije do 100 %. našel sem 80% biti sladka točka za moje oči.
In ja, :after potrebuje a height in width. height je kje to --base spremenljivke se vrnejo v igro, ker želimo, da se merijo na odstavke line-height da bi prekrili besedilo z višino :after.
.card p:after {
/* same as before */
height: calc(1rem * var(--base) + 1px);
width: 100%; /* relative to the .card container */
}Zdelo se je, da je dodajanje ene dodatne slikovne pike višine pomagalo, vendar je MDN to uspelo brez tega, ko sem pokukal v DevTools. Potem spet ne uporabljam top (ali inset-block-start), da izravnate gradient v tej smeri. 🤷♂️
Zdaj, ko p:after je absolutno pozicioniran, moramo izrecno deklarirati relativno pozicioniranje v odstavku, da ga ohranimo :after v svojem toku. Sicer pa :after bi bil popolnoma iztrgan iz toka dokumentov in končal zunaj kartice. To postane celoten CSS za .card odstavek:
.card p {
max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
overflow: hidden; /* Cut off the content */
position: relative; /* needed for :after */
}Končali smo, kajne? Ne! Zdi se, da prekleti gradient preprosto ni na pravem mestu.
Priznam, da sem ob tem prdnil in zagnal DevTools na MDN, da vidim, kaj za vraga zamujam. o ja, :after mora biti prikazan kot element bloka. Ko mu dodamo rdečo obrobo, je jasno kot beli dan.🤦♂️
.card p:after {
content: "";
background: linear-gradient(to right, transparent, var(--background) 80%);
display: block;
height: calc(1rem * var(--base) + 1px);
inset-block-end: 0;
position: absolute;
width: 100%;
}Zdaj vsi skupaj!
In ja, Izgleda zveni, kot da VoiceOver upošteva celotno besedilo. Vendar nisem preizkusil nobenega drugega bralnika zaslona.
Opazil sem tudi, da izvedba MDN odstrani pointer-events iz p:after. Verjetno dobra obrambna taktika za preprečevanje čudnega vedenja pri izbiranju besedila. Dodal sem ga in izbiranje besedila se zdi nekoliko bolj gladko, vsaj v Safariju, Firefoxu in Chromu.
