Meny
Är gratis
checka in
den huvudsakliga  /  Råd / CSS Wavy Line. Stilar understryker på internet

Vågig CSS-linje. Stilar understryker på internet

Från författaren: Stylisering av understrykningar av länkar är ett ganska komplicerat yrke, och jag glömmer ständigt vilken metod som är lämplig i en eller annan situation. Lyckligtvis kommer John Jameson att hjälpa oss att snabbt förstå detta i hans artikel.

Det finns många sätt att stilisera understreck. Du kanske kommer ihåg artikeln "Skapa en understrykning till medium." Medium försökte inte göra något av de utgående ramarna, de ville bara skapa en attraktiv understrykning i texten.

Tunna, svarta understreck med mellanslag runt bokstäver med lägre anteckningar - Arbetet med Marsin Vitchery från artikeln skapar en understrykningsreferens till medium.

En bra standard understrykning, vilket också är en bra storlek och hoppar över de nedre avlägsna delarna av bokstäverna. Mycket bättre än i de flesta standardwebbläsare. Som det visade sig kolliderade medium med många problem på väg. Och till och med två år senare, orsakar fortfarande en bra stylisering av betoningen mycket problem.

Mål

Varför inte använda textdekoration: understryka? Om vi \u200b\u200bpratar om det perfekta scenariot bör understrykning:

position under baslinjen;

hoppa över de nedre avlägsna delarna av bokstäverna;

byt färg, tjocklek och stilar;

gå till en ny sträng;

arbeta med några bakgrunder.

Jag tror att vi kan behöva allt detta från understreck, så vitt jag vet, det finns inget intuitivt sätt att lösa alla dessa uppgifter i CSS.

Tillvägagångssätt

Så vilka metoder har vi till vårt förfogande för att understryka texten? Jag kom ihåg följande:

textdekoration;

bakgrundsbild;

SVG-filter;

Underline.js (canvas);

textdekoration- *

Låt oss gå i hela listan och överväga alla fördelar och nackdelar med varje tillvägagångssätt.

Text-dekoration egendom

Textdekorationsfastigheten är det enklaste sättet att understryka. Du måste bara tillämpa en egendom. På den lilla texten kommer en sådan linje att se normalt, men det är värt att öka teckensnittstorleken och det är redan klumpigt.

Det största problemet med textinredningsegenskapen är bristen på anpassning. Linjen använder färgen och storleken på teckensnittet för den text som den används, och det finns ingen tvärbrowser-metod för ändring av stilar. Lite senare, låt oss prata mer detaljerat på den här egenskapen.

fördelar

bara använda;

belägen under baslinjen;

hoppar de nedre avlägsna delarna av standardbokstäverna i Safari och IOS;

hoppar över till en ny sträng;

fungerar med några bakgrunder.

Minus

missar inte förlängningen av de nedre delarna av bokstäverna i andra webbläsare;

det är omöjligt att ändra färg, tjocklek och stilar.

Gränsbotten egendom

Gränsbotten egendom är en bra balans mellan hastighet och anpassning. Detta tillvägagångssätt Används beprövade CSS-ramarSå du kan enkelt ändra färg, tjocklek och stilar. Det här ser ut som en gränsbotten på inline-elementen:

Den största minus är hur långt understrecket ligger från texten. Understrecket ligger under de nedre avlägsna delarna av bokstäverna. Det här problemet Den är löst om du gör ett element inline-block och minska linjens höjd, men då är förmågan att hoppa i nya linjer förlorade. Väl lämpad för singel linjer, men inte mer.

Dessutom, med hjälp av Text-Shadow, kan du dölja delar av linjen runt det nedre munstycket. I det här fallet måste du mimma bakgrundsfärgen, vilket innebär att metoden bara fungerar på homogena bakgrunder. Gradienter och bilder är inte passa.

På det här ögonblicket Det finns 4 egenskaper för stilisering av underlining. Mycket bättre än bara textdekoration.

fördelar

du kan använda övergångsegenskapen och animera färg och tjocklek;

hoppar över till nya strängar som standard om elementet inte är inline-block;

Minus

linjen är väldigt långt borta och det är svårt att flytta det;

för många onödiga egenskaper måste användas för att understryka väl utseende;

dåligt textval när du använder Text-Shadow.

Box-shadow egendom

Box-Shadow-egenskapen drar en understreck med två inre skuggor: man skapar en rektangel, och den andra döljer den. Det betyder att för korrekt drift av metoden behövs en homogen bakgrund.

Samma knep med textskugga kan användas för att simulera passet runt bokstävernas nedre slut. Om linjeledningen skiljer sig från texten, eller det är ganska tunn, bör det inte finnas några problem eftersom det händer med textdekoration.

fördelar

kan placeras under baslinjen;

du kan hoppa över callouts med textskugga;

kan ändras färg och tjocklek;

hoppar över till nya linjer.

Minus

det är omöjligt att ändra stilar;

fungerar inte med alla bakgrunder.

Bakgrundsfastighet

Bakgrundsbildegenskapen löses bäst av våra uppgifter, och det har mycket få minuses. Tanken är att du skapar en bild med linjär gradient och bakgrundsställning, som upprepas längs den horisontella axeln längs textsträngarna. Elementet måste visas: Inline;.

Demoen nedan använder inte linjärradient. För att skapa en brant effekt kan du använda din bild.

fördelar

kan placeras under baslinjen;

du kan hoppa över de nedre callouts med textskugga;

det är möjligt att ändra färg, tjocklek (även på polpixel) och stilar;

fungerar med användarbilder;

hoppar över nya linjer;

fungerar med någon bakgrund, om du inte använder Text-Shadow.

Minus

bildens storlek kan variera på olika sätt till olika behörigheter, webbläsare och öka nivåerna.

SVG-filter

Jag spelade med den här metoden. Du kan skapa ett Inlaain SVG-filterelement som kommer att rita en linje och expandera texten för att dölja de delar av linjen som måste vara transparenta. Du kan tilldela filter-ID och se det i CSS med Filter: URL ('# SVG-underlinje').

Vad är plusen - filtret lägger till genomskinlighet utan att förlita sig på textskuggan. Det är att du kan hoppa över de nedre bollarna i bokstäverna på vilken bakgrund som helst, inklusive gradienter och bilder! Exemplet nedan arbetar med endast en textsträng, så var försiktig.

Och så ser det ut i Chrome och Firefox:

I IE, EDGE och Safari med stöd uppstår problem. CSS är svårt att testa stödet till SVG-filter. Du kan använda @supports regeln på filter, men så kontrollerar du bara referensens arbete, och inte det filter som appliceras eller inte. Min väg arbetar ganska ojämn med webbläsare, så var dubbelt försiktig.

fördelar

belägen under baslinjen;

hoppar över de nedre calloutsna;

kan ändras färg, tjocklek och stilar;

fungerar på någon bakgrund.

Minus

hoppar inte över nya linjer;

det fungerar inte i IE, EDGE och Safari, men du kan ange textdekoration som en folback. Understrykning i safari ser sig bra ut.

Underline.js (canvas)

Underline.js är ett fantastiskt bibliotek. Jag är imponerande att när Zhang kunde göra med JS och uppmärksamhet på detaljer. Om du inte har sett den tekniska demo underline.js, stanna en minut och se. Nätverket har en underbar nio minuters prestanda på principerna om arbete, jag kommer snabbt att spendera det nu. Underkläder dras med hjälp av duk. Ett helt nytt tillvägagångssätt, vilket är överraskande att fungera bra.

Trots det attraktiva namnet är det bara en teknisk demo. Det är, du kommer inte att kunna omedelbart placera biblioteket i projektet utan en hel byte av förändring.

Detta bibliotek bör nämnas endast som bevis på konceptet. Canvas har potential för att skapa vackra, interaktiva understreck, men för det rätta jobbet måste du skriva en extra JS-kod.

Text-dekoration- * Egenskaper

Kom ihåg att jag sa det lite senare kommer vi att analysera något mer detaljerat? Nu kommer det att gå. Text-dekoration egendom fungerar bra i sig, men vi kan lägga till ett par experimentella egenskaper för mer bättre syn:

text-dekoration-färg

text-dekoration-Skip

text-dekoration-stil

Glöm inte i förväg, du vet om stöd i webbläsare.

Text-dekoration-färg egendom

Med text-dekorationsfärgfastigheten kan du ändra texten på understrecket separat från textens färg. Fastigheterna har även ett bra stöd i webbläsare. Det fungerar i Firefox och med prefixet i Safari. Det finns din minus - om du inte rengör linjen runt callouts, i safari ligger den ovanpå texten. Firefox:

Fastighet Text-Dekoration-Skip

Text-dekoration-Skip-egenskapen är ansvarig för att hoppa över de nedre callouts i den understrukna texten.

Fastigheten är icke-standard och arbetar just nu endast i Safari. För att arbeta i andra webbläsare behöver du använda prefix -webkit-. I Safari är den här egenskapen aktiverad som standard, varför understrecket hoppa över de lägre hoisings även på de webbplatser där den här egenskapen inte är angiven.

Om du använder Normalize, behöver du veta det senaste versionerna Koppla bort egenskapen för normal drift i alla webbläsare. Om du vill returnera dessa nästan magiska understreck, måste du aktivera den här egenskapen.

Text-dekoration-stil egendom

Egenskapen Text-Decoration-Style erbjuder samma understreck som egenskapen gränsstil, men lägger också till den nya typen - vågig. Möjliga värden:

Just nu arbetar text-dekoration-stil egendom endast i Firefox, skärmdumpen visas nedan:

En uppsättning monokromatisk betoning ser ut?

Vad är fel?

Egenskaperna hos textdekorationen - * är mer intuitiva jämfört med andra egenskaper för styling understreck. Om emellertid en annan titt på de krav som vi har presenterat tidigare kan det noteras att med hjälp av dessa egenskaper är det omöjligt att ändra tjockleken och positionen. Efter en liten studie hittade jag dessa två egenskaper:

textundersökningsbredd

textundersökningsposition

Det verkar som att dessa egenskaper kastades ut ur den tidiga versionen av CSS på grund av bristen på intresse för dem. De ansökte inte. Hej, jag är inte skyldig för detta.

Slutsatser

Så hur bäst att betona texten? Allt beror på olika faktorer.

För en liten text rekommenderar jag att du använder textdekoration och en experimentell textdekorationshoppegenskap, hoppas att det kommer att fungera. I de flesta webbläsare ser det ut så, men det var alltid att människor inte var uppmärksam på det. Om du är tålmodig, finns det en chans att alla dina understrykningar på kort tid kommer att se bra ut, och du behöver inte ändra någonting.

För huvudtexten, använd bakgrundsbilden. Metoden fungerar, det ser vackert ut, och för det finns det sassblandningar. Om understrecket är subtilt, eller färg skiljer sig från texten, kan du helst hoppa över textskuggmetoden. För text på en rad, använd gränsbotten och andra egenskaper.

Och för att hoppa över bokstäverna på gradientbakgrunder eller bilder, försök använda SVG-filtret. Eller helt enkelt blanda inte sådana bakgrunder med understreck. I framtiden, när stöd i webbläsare förbättras, kan du använda egenskaperna för textdekoration-*.

Beskrivning

Lägger till textdesign i form av dess understrykning, korsning, linjer över text och blinkande. Samtidigt kan du ansöka mer än en stil, vilket förbinder värdena genom utrymmet.

Syntax

textdekoration: [blink || Linje-genom || Överline || Understryka] | ingen | ärva.

Värderingar

Blink sätter blinkande text. Denna text är regelbundet, om en gång per sekund försvinner, visas igen på samma plats. Detta värde stöds för närvarande inte av webbläsare och fördömas i CSS3, det rekommenderas att använda animering i gengäld. Line-through skapar en korsad text (exempel). Överlinjelinjen passerar över texten (exempel). Understreck sätter den understrukna texten (exempel). Ingen avbryter alla effekter, inklusive understryker referensen, som är standard. Äventionsvärdet är ärvt från föräldern.

Html5 css2.1 dvs cr op sa fx

textdekoration.

Strategisk attack

Objektmodell

document.getelementbyid ("elementid") .style.textDecorage

dokument.getelementby ("elementid") .style.textDecorageblink

document.getelementby ("elementid") .style.textdecorationlinethrough

document.getelementby ("elementid") .style.textDecorationNone

document.getelementby ("elementid") .style.textDecorageorsenceone

document.getelementby ("elementid") .style.textDecorageUnderline

Webbläsare

Internet Explorer före version 7.0 stöder inte det arvsvärdet. Linjen som erhållits med användning av genomgångsvärdet i IE7 är beläget högre än i andra webbläsare; I IE8 är det här felet fixat.

Gör det möjligt att göra en annan understreck i HTML Lower (underline), topp (överline), korsad text (linje-through), etc. Kompatibla detta chip med den föregående och kommer att fungera:

I den andra raden visas hur allt spelas in i en rad med textdekoration.

text-dekoration-Style - Text understrykning

Alternativet ställer in utseendet på den dekorativa linjen för / referens. I de nya CSS-rekommendationerna tillsattes vågiga och dubbla värden, nu är de bara 5:

  • solid - solid linje;
  • dubbel - dubbel (från det första exemplet ovan);
  • prickad - består av en sekvens av punkter;
  • streckad - låter dig göra en prickad undervisning CSS;
  • vågig - Spektakulär vågig linje.

textundersökningsposition - Positionering CSS understreck

Med hjälp av den här egenskapen kan du styra läget för linjen i förhållande till Glyph-teckensnittet.
Totalt 4 alternativ är tillgängliga:

  • auto - ligger så nära som möjligt text i texten;
  • under - under den lägsta gränsen för teckensnittet
  • vänster och höger - vänster / höger för poster som visas vertikalt.

Här är den visuella skillnaden mellan den nedre understrecktexten med hjälp av under och auto:

Skillnaden, tror jag, är ganska uppenbart.

text-dekoration-Skip - Vi tar bort understrykning för objekt

Med alternativet kan du avbryta (hoppa över) dekorera några element i HTML-sträng. För att bättre förstå de giltiga värdena på utrymmen, föremål, boxdekoration, kanter, bläck jag ska duplicera bilden från den sista noten:

Det är till exempel med hjälp av bläck, du kan göra det nedre understrykningen i CSS, som inte skulle korsas med tecknen. Objektvärdet gör att du kan hoppa över inline-elementen (inline-block) - insatsen och den fasta linjen kommer att avbrytas på lämplig plats:

Parametrarna för låddekoration, mellanslag, kanter är mycket sämre stöds av webbläsare, så deras resultat skiljer sig ibland från det förväntade. Här är en kompatibilitet / support tillstånd av textdekoration vid tidpunkten för att skriva artikeln:

Ytterligare chips till understrykning

Nybörjare användare frågar ofta några typiska frågor om ämnet, så vi bestämde oss också för att överväga dem. Det totala exemplet ligger längst ner efter förklaringen.

Så här tar du bort understrykning

a: Hover (textdekoration: understryka;)

Båda exemplen nedan låter dig förstå logiken för arbete när du sveer: eller du anger ursprungligen i CSS understryper Länkar och ta sedan bort det för att sväva, eller vice versa.

Om det finns några andra frågor om ämnet, fråga dem i kommentarerna. Vi kommer att försöka överväga senare eller föreslå i svaren. Det viktigaste i denna fråga är övningen - försök att lägga till olika egenskaper för textinredningsalternativet direkt i exemplen eller skapa din egen testfil. Vi hoppas på ämnet för text understreck och länkar i CSS / HTML det har blivit klart.

Den betoning är respektive respektive olika metoderna för dess skapande. Nedan är flera populära.

Använda textdekoration

Textdekorationsfastigheten med underlinjevärdet lägger tonvikten på texten. Denna typ av betoning kan observeras för standardreferenser. Linjen som skapats på detta sätt är lika med textens bredd och kommer att vara samma färg som huvudet själv. Du kan ändra färglinjen genom text-dekorationsfärgfastigheten. Exempel 1 visar användningen av textdekoration till elementet

.

Exempel 1. Använda textdekoration

Skarp

Resultatet av detta exempel visas i fig. ett.

Fikon. 1. Typ av rad som skapats genom textdekoration

IE och EDGE Browsers stöder inte textinredningsfärgfastigheten.

Använda gränsbotten

Fast egendom gräns \u200b\u200bbotten. Lägger till elementet under linjen av en given tjocklek, färg och stil. En sådan linje tar hela den tillgängliga bredden, trots längden på huvudtexten (fig 2).

Fikon. 2. Utsikt över linjen som skapats av gränsbotten

Avstånd från rad till text kan justeras med egendomen. paddingbotten Som visas i exempel 2.

Exempel 2. Använda gränsbotten

Skarp

Kulturellt talslag i XXI-talet

Faktum är att Myth-Fupping Text-enheten illustrerar diskurs, och det ger honom sitt ljud, egen karaktär.

Till linjen är på textens bredd är det tillräckligt att vända huvudet i ett stream-blockelement genom att lägga till en egenskap till väljaren H2 visa med ett inline-block-värde.

Användning :: Enecter and Content

Du kan också göra en artificiell linje genom en kombination av egenskaper. innehåll och pseudo-element :: efter. . De kommer endast att dra tillbaka ett tomt pseudo-element efter titeln, och utseendet på detta pseudo-element bestäms av andra egenskaper. I fig. 3 visar en liknande rad.

Fikon. 3. Linje skapad av :: Efter

Positionen för en sådan linje i förhållande till texten är inställd genom egenskapen. botten Med ett negativt värde, linje färg genom egendom bakgrund. . Det visar sig faktiskt inte en linje, men ett rektangulärt block, så vi använder bakgrundsfyllningen (exempel 3).

Exempel 3. Användning :: Efter

Skarp

Kulturellt talslag i XXI-talet

Faktum är att Myth-Fupping Text-enheten illustrerar diskurs, och det ger honom sitt ljud, egen karaktär.

Det finns en massa på olika sätt understrykning. Du kanske kommer ihåg artikeln Marsina Vicari "Crafting Link understryker" på medium. Medium utvecklare försöker inte göra något galet, de vill bara skapa en vacker linje under texten.

Detta är det enklaste understrykning, men den har rätt storlek och det överlappar inte de avlägsna elementen i bokstäverna. Och det är definitivt bättre än standard understrykning i de flesta webbläsare. Medium måste möta svårigheterna att uppnå sin stil på webben. Två år senare är vi fortfarande svåra att göra en vacker understreck.

Mål

Vad är fel med den vanliga textdekorationen: understryka? Om vi \u200b\u200bpratar om det perfekta scenariot, bör understrykningen göra följande:

  • placerad under baslinjen;
  • hoppa över fjärrelement;
  • byt färg, tjocklek och stil linje;
  • arbeta med multi-line text;
  • arbeta på någon bakgrund.

Jag tror att det här är alla rimliga krav, men så vitt jag vet finns det inget intuitivt sätt att uppnå detta med hjälp av CSS.

Tillvägagångssätt

Så det här är för olika metodersom vi kan implementera understrykning på webben?

Här är de som jag anser:

  • textdekoration;
  • gräns-botten;
  • boxskugga;
  • bakgrundsbild;
  • sVG-filter;
  • Underline.js (canvas);
  • text-dekoration- *.

Vi kommer att analysera dessa metoder en efter en och prata om fördelarna och nackdelarna med var och en av dem.

textdekoration.

textdekoration är det mest uppenbara sättet att understryka. Du tillämpar en egendom och det är nog. På små teckensnittstorlekar kan det se ganska bra ut, men öka teckensnittstorleken och en sådan understrykning börjar se besvärligt ut.

Det största problemet med textdekorationen är bristen på inställningar. Du är begränsad till textens färg och teckenstorlek och du har inte ett webbläsare för att ändra det. Vi kommer fortfarande att prata om det mer detaljerat.

  • lätt att använda;
  • placerad under baslinjen;
  • som standard är de lägre borttagningselementen i Safari och IOS;
  • betonar multi-line-texten;
  • fungerar på någon bakgrund.
  • missar inte de nedre fjärrelementen i alla andra webbläsare;
  • låt dig inte ändra färg, tjocklek eller stillinje.

gräns \u200b\u200bbotten.

gränsbotten erbjuder en bra balans mellan enkelhet och anpassningsbarhet. Detta tillvägagångssätt använder den gamla goda egendomen CSS för gränsen, det betyder att du enkelt kan ändra färg, tjocklek och stil.

Så här ser gränsbotten ut som små bokstäver.

Den huvudsakliga nackdelen är avståndet från undersidan från texten, den är helt lägre än de borttagna elementen. Du kan fixa det genom att ställa in fastighetsprodukterna i Inline-Block och minska linjens höjd, men då kommer du att förlora förmågan att vikla text. Bra för enskilda linjer, men mer är inte lämplig var som helst.

Dessutom kan vi använda Text-Shadow för att överlappa en del av linjen bredvid substitutionselementen, imiterar den med samma färg som bakgrunden. Det vill säga, den här tekniken fungerar bara på en enkel monokrom bakgrund, utan gradienter, mönster eller bilder.

För närvarande använder vi redan hela fyra egenskaper för att utforma en rad. Det är mycket mer arbete än bara lägga till textdekoration.

  • kan hoppa över fjärrelement med textskugga;
  • kan ändra färg, fett och stil linje;
  • gör det möjligt att använda övergångar och animeringar av färger och fetthet.
  • fungerar med multi-line-text, om inline-blockvärdet inte är tillämpat.
  • fungerar på vilken bakgrund som helst, om du inte använder Text-Shadow.
  • placerad för lågt och rör sig i en komplex metod;
  • många ytterligare egenskaper används för korrekt drift;
  • när du använder Text-Shadow ser valet av text i gula ut.

boxskugga

box-Shadow drar en substitcher på grund av två interna skuggor: man skapar en rektangel, och den andra döljer den. Det betyder att du behöver monofonisk bakgrund För att det ska fungera.

Du kan använda samma trick med textskugga för att fylla passerna mellan understrykning och fjärrelement. Men om undersidan av understrykning skiljer sig från textens färg - eller det är helt enkelt ganska tunt, kommer linjen inte att möta fjärrelement som vid användning av textdekoration.

  • låter dig ändra färgen och tjockleken på linjen;
  • fungerar med multi-line-text.
  • tillåter inte att ändra understrykningsstilen;
  • det fungerar inte på någon bakgrund.

bakgrundsbild.

Metoden med bakgrundsbilden är närmast vår önskan och har en minsta brister. Tanken är att använda linjärt-gradient och bakgrundsställning för att skapa en bild som upprepar under textlinjen.

För att arbeta detta tillvägagångssätt är det nödvändigt att texten är i standardlägesdisplay: Inline; .

Följande alternativ är gjort utan linjär gradient, för effekter kan du lägga till din bakgrundsbild.

  • kan placeras under baslinjen;
  • kan hoppa över de avlägsna elementen på bekostnad av textskugga;
  • fungerar med anpassade bilder;
  • wraps några rader av text;
  • fungerar på vilken bakgrund som helst, om du inte tillämpar textskugga.
  • bildens storlek kan variera beroende på skärmupplösning, webbläsare och zoom.

Filter SVG.

Jag spelade mycket med det här sättet. Du kan skapa ett SVG-småhusfilter, som drar en linje och expanderar sedan texten för att maskera en del av linjen, som vi vill göra transparenta. Du kan sedan ställa in ID-filtret och se det i CSS ungefär så filtrera: URL ('# SVG-underlinje').

Fördelen med detta tillvägagångssätt är att transparens uppnås utan att applicera textskugga, det vill säga, vi hoppar över de avlägsna elementen på någon bakgrund, inklusive gradienter och bakgrundsbilder! Det fungerar bara på en separat textlinje, överväga det.

Så här ser det ut i Chrome och Firefox:

Stöd i IE, Edge och Safari är problematisk. Det är svårt att testa stödet från SVG-filtret i CSS. Du kan använda @supports-direktivet med filter, men det kommer bara att kontrollera filterlänken, men inte själva filtrets arbete. Mina försök slutade med den ömsesidiga definitionen av webbläsarens möjligheter, det här är en konkret brist på en metod.

  • kan placeras under baslinjen;
  • kan missa avlägsna element;
  • tillåter en förändring av färg, tjocklek och stil linje;
  • fungerar på någon bakgrund.
  • fungerar inte med multi-line-text;
  • det fungerar inte i IE, Edge och Safari, men du kan använda textdekoration som ett backupalternativ, i safari det ser värdigt ut.

Underline.js (canvas)

Underline.js fascinerar. Jag anser det vara ett imponerande vilket venten Geng från att äga JavaScript och uppmärksamhet på detaljer. Om du inte har sett en teknisk demo underline.js, kasta läsa och få en minut av tiden. Det finns också hennes nio minuters rapport om hur det fungerar, men jag kommer att beskriva en kort: Understrykning drar med hjälp av element . Detta är ett nytt tillvägagångssätt som fungerar överraskande bra.

Trots utmaningsnamnet är underline.js bara en teknisk demo. Det innebär att du inte bara kan ta och ansluta den till ditt projekt utan att ändra koden.

Jag bestämde mig för att nämna detta i beviset på konceptet som Det har potential att skapa utmärkta interaktiva undersnitt, men det gör det, måste du skriva ditt JavaScript.

Nya egenskaper Textdekoration

Du kommer ihåg att jag lovade att prata om textdekoration. Tiden har kommit.

I sig fungerar den här egenskapen bra, men du kan lägga till flera experimentella egenskaper för att anpassa extern utsikt understrykning.

  • text-dekoration-färg
  • text-dekoration-Skip
  • text-dekoration-stil

Men glädja dig inte för mycket ... Stöd i webbläsare - som alltid. Så går det.

text-dekoration-färg

Med text-dekorationsfärg kan du ändra nivån på understrykning separat från textens färg. Stöd för den här egenskapen är bättre än du kan förvänta dig - det fungerar i Firefox och med prefixet i Safari. Det är vad snag: Om du har avlägsna element, kommer Safari att lägga undersidan över texten.

text-dekoration-Skip

Egenskapen Text-Dekoration-Skip innehåller en passage av avlägsna element i den understrukna texten.

Den här egenskapen är icke-standard och fungerar nu bara i Safari, med prefix -Webkit. Safari Som standard aktiverar den här egenskapen, så de fjärranslutna elementen är alltid korsade.

Om du använder Normalize, notera då att de senaste versionerna inaktiverar den här egenskapen för det på varandra följande beteendet av webbläsare. Och om du vill att understrykning inte påverkar de avlägsna elementen, måste du manuellt aktivera den.

text-dekoration-stil

Egenskapen Text-Decoration-Style erbjuder samma designmöjligheter som egenskapen i gränsstilen och lägger till den vågiga stilen utom.

Här är listan över tillgängliga värden:

  • streckad.
  • prickad.
  • dubbel.
  • fast

Nu arbetar text-dekoration-stil egendom endast i Firefox, här är en skärmdump av det:

Vad saknas

En serie egenskaper hos textdekorationen - * är mycket mer intuitiv att använda än de andra CSS-egenskaperna för understrykning. Men om du ser mer noga, räcker det inte att tillgodose våra önskemål om att ställa in tjockleken eller positionen på linjen.

Efter en liten studie hittade jag ett par fler egenskaper:

  • textundersökningsbredd
  • textundersökningsposition

Tydligen relaterar de till de tidiga CSS-utkastet, men de implementerades aldrig i webbläsare på grund av brist på intresse.

Slutsatser

Så vad är metoden att underlätta det bästa?

För en liten text rekommenderar jag att du använder textdekorationen med ett optimistiskt tillägg av textdekorationshopp. Det ser lite smaklöst i de flesta webbläsare, men understrykning i webbläsare var alltid och människor kommer helt enkelt inte att uppmärksamma. Dessutom finns det alltid en chans att om du har tålamod, kommer det här understrykningen någonsin att se bra ut utan att du behöver ändra något, eftersom det kommer att göras i webbläsare.

För grundläggande text är det vettigt att använda bakgrundsbild. Detta tillvägagångssätt fungerar, ser bra ut och det finns SAS-mixers för honom. Du kan i princip hoppa över textskugga om understrecket är tunn eller kännetecknat av färg från text.

För separat sträng Text Använd gränsbotten tillsammans med ytterligare egenskaper.

Och om du behöver hoppa över fjärrelement mot gradienten eller bilden, försök använda SVG-filter. Eller helt enkelt undvika att använda ett understrykning.

I framtiden, när stöd i webbläsare är bättre, kommer det enda svaret att vara en uppsättning egenskaper för textdekorationen - *.

Jag rekommenderar också att uppmärksamma artikeln Benjamin Woodroff CSS understryker suger, där samma frågor beaktas.