15 Nyttige CSS-tricks du kunne have overset

Hvis du har været en frontend webudvikler i et stykke tid, er der en stor chance for, at du har haft et øjeblik, da du forsøgte at finde ud af, hvordan man kodede noget og realiserede efter lidt googling, at “der er CSS for det”. Hvis du ikke havde det, så er du ved at.

Dette indlæg er en samling af sådanne CSS-koder, som kan give dig funktioner som et element klæbrig, giver dig stiplede linjer understreger evner, flyder teksten på din side i en særlig form eller opnår parallax effekt. Nogle af dem understøttes bredt, mens andre er på vej for fuld understøttelse af alle browsere.

1. Nummeroverskrifter og underpositioner

   Sig, du har et sæt overskrifter og underpositioner i dit dokument, og du nummererer dem manuelt eller via et script. I stedet kan du bruge CSS-tællere til at gøre dette. Der er allerede et dybtgående indlæg på det her. Og da det er fra en CSS2 spec, kan du satse på, at den understøttes af alle browsere, undtagen måske IE 6.

2. Spice Up Plain Underlines

   Nogle gange vil vi understrege med en flot prikket eller stiplede linje i stedet for en solid en. Da der ikke er nogen mulighed for det, afregner vi os border-bottom. Men border-bottom er ikke en god løsning, hvis teksten du understreger wraps.

   CSS3 specificeret ikke en, men tre nye egenskaber til tekstdekoration tekst-dekoration-farve, tekst-dekoration-line, og tekst-dekoration-stil som kan shorthanded i den gode gamle tekst-dekoration.

   Du kan bruge dem til at understrege stil, overline, endda gøre tekst blink og meget mere. Fra april 2015 understøtter Firefox kun denne ejendom, men du kan aktivere “eksperimentelle webplatform funktioner” at bruge det på Chrome.

3. Citerer et citat

   Først og fremmest er der ingen grund til at genere med at skrive de korrekte krøllede citater for korte citater, fordi der er HTML for det: tag, der angiver inline citater.

   Det tag tager også sig af at citere de indre citater med enkelte citater. Så hvor er “der er 'CSS' til det” øjeblik i dette?

   Lad os sige, at du ikke vil have standard dobbelt citater, eller hvis du har mere end et niveau af indlejrede citater, kan du definere dine citatpræferencer for citatelementet med CSS ved hjælp af CSS2 citater ejendom.

4. Håndtering af urokkelige tabeller

   Du har måske stødt på et stort bord med varierende indholdsstørrelse pr. Celle, som nægter at forblive inden for en bredde, du har angivet, uanset hvad du prøver. Tæm det bord med tabel-layout ejendom (for samme kolonnehøjde, følg dette link).

   For at være specifik, er løsningen i bordlayout: fast; værdi. Når du tildeler et fast layout til bordet, bestemmes bordet og cellebredden af ​​bredden af ​​bordet eller den første række af celler (som kan defineres af brugeren) og ikke af indholdet. Dette understøttes af alle browsere.

5. Gør det klæbrig

   Klæbende elementer er elementer på en side, der ikke rulles ud af visningen. Med andre ord stikker det til et synligt område (visningsport eller rulleboks). Du kan oprette dette med CSS ved hjælp af stilling: klæbrig;.

   De virker som relativt postioned elementer før enhver rullning og senere som faste elementer, når en rullende tærskel er nået. For nu, kun Firefox støtter det.

6. Få din tekst i form

   Ønsker du teksten på din side at pæne kurve over noget billede, du viste ud for det? Du kan prøve CSS figurer. For at implementere CSS-former kan vi benytte tre egenskaber form udenpå, form-margin og form-image-tærskel. Fra april 2015 understøttes CSS Shapes af webkit browsere.

7. Obligatoriske felter

   Hvis du har en formular, er der en stor chance for, at nogle felter i det er påkrævet, mens andre ikke er. Du skal lade brugerne vide, hvilket er hvilket. CSS for dette er : kræves :valgfri pseudoklasser. Alle moderne browsere understøtter dem.

8. Picky med farver

   Hvis du ikke kan lide en bestemt farve, som blå, kan vi farve det valgte område med en anden farve og ::udvælgelse pseudo-element er CSS for det. Dette understøttes af alle moderne browsere.

9. Kontrollerede jeg det?

   I en situation, hvor der er markeret en afkrydsningsfelt, ville det være rart at have en anden indikation fra hinanden i den lille markering inde i standardboksen for at angive, at varen er blevet kontrolleret.

   Der er CSS for det, der udnytter båndet mellem de nærmeste søskende, to elementer side om side. CSS har tilstødende søskendevælger betegnet med pluset + tegn, og vi kan bruge det til at målrette mod etiketten ved siden af ​​afkrydsningsfeltet. Men hvad med at sætte den markerede afkrydsningsfelt først ind? Der er den : kontrolleret pseudoklasse for det.

10. Ligesom en historiebog

    Så ville det ikke være godt, hvis den første “O” i “Der var engang” ser smuk ud? Vi kan få det til at se godt ud, trods alt er der CSS for det. Her er hvor :: første bogstaver pseudo element kommer til undsætning. Det er målrettet mod første bogstav i den første linie i det målrettede element. Læs mere om det her.

11. Vil du gerne vide mere?

    Et element kan have klasse X eller data Y eller en anden værdi til en attribut. Hvis vi nogensinde skal vise sådan en attributværdi for et element i nærheden af ​​det, kan vi bruge indhold: attr (X). Det henter værdien af ​​attribut X af elementet, så vi kan vise det ved siden af ​​elementet.

12. Lidt lidt til venstre

    Centreringselementer til CSS begyndere er ret en feat. Forskellige elementer kræver forskellige sæt CSS-egenskaber for at centrere dem. Vi vil undersøge et eksempel ud af mange, der er tilgængelige i verdensomspændende web, så du kan huske igen, at der er CSS at centrere ting.

13. Udgiv filformat af links

    Har du nogensinde set et lille billede i nærheden af ​​et link, der angiver, hvad dette link er? En PDF? eller en DOC? Ja, der er CSS for at opnå det. Det indhold: url () er det, vi vil bruge til at vise billedet bag linkene.

14. Trigger Parallax Effect

    Parallax-effekten er en effekt, der bruges til at beskrive den tilsyneladende langsomme bevægelse af baggrund i forhold til forgrunden. Denne effekt er populær i websteder, der implementerer parallaxrulning. Der er forskellige måder at implementere det på, eksempelet nedenfor fungerer i Firefox med baggrundsbestemmelse: fast;.

15. Kraften af ​​CSS Animationer

    Sandsynligvis ikke en enorm “der er CSS for det” øjeblik, fordi du alle sikkert er klar over CSS animationer nu. Men en lille påmindelse er ingen skade. Der er mange anvendelser til CSS animationer, men her er en til en enkel farveøvelse.

Læs nu: 50 Nyttige CSS-uddrag, som hver designer skal have