CSS-trucs
CSS Oneindige en cirkelvormige roterende afbeeldingsschuifregelaar | CSS-trucs
Afbeeldingsschuifregelaars (ook wel carrousels genoemd) zijn overal. Er zijn veel CSS-trucs om de gemeenschappelijke schuifregelaar te maken waarbij de afbeeldingen van links naar rechts (of omgekeerd) schuiven. Hetzelfde geldt voor de vele JavaScript-bibliotheken die fraaie schuifregelaars met complexe animaties maken. Dat gaan we in dit bericht niet doen. Door middel van een kleine reeks artikelen gaan we een aantal mooie en ongebruikelijke schuifregelaars voor alleen CSS verkennen. Als je moe bent van het zien van dezelfde oude klassieke sliders, dan ben je op de juiste plek! Voor dit eerste artikel beginnen we met iets dat ik de "circulaire roterende afbeeldingsschuifregelaar" noem: Cool toch? laten we de code ontleden! De HTML-opmaak Als je mijn reeks fraaie afbeeldingsversieringen of CSS-raster en aangepaste vormen hebt gevolgd, dan weet je dat mijn eerste regel is om met de kleinst mogelijke HTML te werken. Ik doe altijd mijn best om CSS-oplossingen te vinden voordat ik mijn
Dieper graven in vragen over containerstijlen | CSS-trucs
Ik heb een tijdje geleden enkele vroege gedachten over query's in containerstijl opgeschreven. Het is nog vroeg. Ze zijn al gedefinieerd in de Specificatie CSS Containment Module niveau 1 (momenteel in Editor's Draft-status) maar er vinden nog een aantal openstaande discussies plaats. Het basisidee is dat we een container kunnen definiëren en vervolgens stijlen voorwaardelijk kunnen toepassen op zijn afstammelingen op basis van de berekende stijl. @container <name>? <conditions> { /* conditional styles */ } Het beste voorbeeld dat ik tot nu toe heb gezien, is het verwijderen van cursief uit iets als <em> , <i> en <q> wanneer ze worden gebruikt in een context waarin de inhoud al cursief is: em, i, q { font-style: italic; /* default UA behavior */ } /* When the container's font-style is italic, remove italics from these elements. */ @container style(font-style: italic) { em, i, q { font-style: normal; } } Dat is het algemene idee. Maar als je het nog niet wist, Miriam Suzanne, die
Meer dan "verf op een website slaan" | CSS-trucs
Ik ben een sukkel voor alles wat met front-end functietitels te maken heeft. Anselm Hannemann : CSS is geëvolueerd en we zijn voorbij het punt waarop iedereen het gewoon als bijzaak kan doen. We kunnen het allemaal leren en er geweldige dingen mee bouwen, maar het verstandig en correct gebruiken in een grootschalige context is geen gemakkelijke taak meer. Het verdient mensen wiens werk het is om zich op dat deel van de code te concentreren. Anselm reageert gedeeltelijk op Sacha Greif's "Is er nu te veel CSS?" en het algemene gevoel dat CSS een veel hogere toegangsdrempel heeft voor degenen die het vandaag leren dan bijvoorbeeld in de CSS3-dagen. Destijds was er een super direct pad om de magie van CSS te zien. Rachel Andreas vat dat magische gevoel perfect samen in een vooruitziende post uit 2019: Er is iets opmerkelijks aan het feit dat ik, met alles wat we in de afgelopen 20 jaar hebben gemaakt, nog steeds een complete beginner kan leren om in één dag een eenvoudige webpagina met
De nieuwe beperkte lay-out gebruiken in WordPress-blokthema's | CSS-trucs
Een van de hoofddoelen van de WordPress Site Editor (en ja, dat is nu de "Officiele naam ) is om de basisstijl van blokken te verplaatsen CSS naar gestructureerde JSON . JSON-bestanden zijn machinaal leesbaar, waardoor ze kunnen worden gebruikt door de op JavaScript gebaseerde Site Editor voor het rechtstreeks in WordPress configureren van de globale stijlen van een thema. Het is nog niet helemaal zover! Als we kijken naar het Twenty Twenty-Two (TT2) standaardthema, waren er twee belangrijke onopgeloste problemen: styling interacties (Leuk vinden :hover , :active , :focus ), en de marges en opvulling van lay-outcontainers . Je kunt zien hoe die tijdelijk werden opgelost in de TT2 style.css bestand in plaats van het in de theme.json het dossier. WordPress 6.1 loste die problemen op en wat ik wil doen is specifiek naar de laatste kijken. Nu we JSON-gebaseerde stijlen hebben voor de marges en opvulling van lay-outcontainers, opent dat ons voor flexibelere en robuustere manieren om