Boxgrootte wijzigen in Internet Explorer 7 [Quicktip]

We hebben CSS3 Box Sizing behandeld in een vorig artikel. Vakindeling, met de waarde van border-box, stelt ons in staat om de elementbreedte en -hoogte te behouden, ongeacht de extra opvulling en rand die het heeft.

Dit maakt het meten en definiëren van elementafmetingen eenvoudiger . CSS3 Box Sizing zou echter niet werken in Internet Explorer 7 (IE7) en eerdere versies, zoals u hieronder kunt zien.

Beide kolommen die u in het bovenstaande screenshot ziet, hebben de opgegeven width, height, padding en box-sizing . Maar omdat IE8 de eigenschap voor het box-sizing de box-sizing niet herkent, wordt de tweede kolom naar beneden gedrukt wanneer hun totale breedte de breedte van hun bovenliggende container overschrijdt .

U moet de grootte van elke kolom dienovereenkomstig aanpassen om ze er in te laten passen, wat een zeer vervelende taak kan zijn, afhankelijk van het aantal elementen dat u moet verwerken . Als uw website IE7 (om welke reden dan ook) moet ondersteunen en CSS3 Box Sizing moet behouden, kunt u de volgende truc gebruiken.

Vakindeling Polyfill

Om IE8 (en lager) Box Sizing te laten erkennen, kunnen we een polyfill gebruiken. Deze polyfill komt in de vorm van een HTC-bestand en is ontwikkeld door Christian Schaefer. Download het bestand uit de Github-repository en plaats het bijvoorbeeld in uw CSS-map.

Maak een CSS-stylesheet, speciaal voor Internet Explorer. Voeg de link in het HTML-document op deze manier toe, zodat deze alleen in IE7 wordt weergegeven.

Plaats vervolgens de volgende code in de ie.css . Deze CSS-regel hieronder past box-sizing voor alle elementen.

 * {gedrag: url (css / boxsizing.htc); } 

Een paar dingen om op te merken bij het toepassen van deze truc:

Het URL-pad van boxsizing.htc moet relatief zijn ten opzichte van de HTML-bestandslocatie, anders werkt het niet.

Paul Irish heeft ook een tip om box-sizing te passen in pseudo-element met *:before, *:after . Maar aangezien IE7 en IE6 geen pseudo-element ondersteunen, is er in dit geval geen reden om pseudo-elementselectoren te gebruiken. En zoals u hierboven kunt zien, nemen we ze ook niet op in de code.

Het resultaat

Hier hebben we twee kolommen waarvan de breedte van de bovenliggende container is ingesteld op 500px. De kolombreedte is ingesteld op 50%, dus elke kolom moet een breedte van 250 px hebben, hoewel we er ook opvulling voor instellen. Laten we Internet Explorer 7 openen en de Developer Tool (F12) starten.

Ga naar het tabblad Layout van de Developer Tool om de kolomgrootte in detail te bekijken. Je zou moeten zien dat in IE7 de kolom nu padding en borders bevat als onderdeel van de totale grootte. In ons geval blijft de breedte van de doos op 250 px.

Deze Galerij van Pure CSS-pictogrammen is wat alle ontwikkelaars van Frontend willen

Adobe-ontwerper Wenting Zhang heeft een interessante webapp gemaakt voor het genereren van pure CSS-pictogrammen . Het wordt eenvoudig "CSS-pictogram" genoemd en is misschien wel een van de coolste pictogramgeneratoren voor ontwikkelaars van frontends.Dit project is volledig gratis en open source op GitHub, dus je bent vrij om te downloaden en te knoeien met een van de codes

(Technische en ontwerptips)

18 Handige tools voor een betere Gmail-ervaring

Gmail (ook bekend als Google Mail) is een van de beste e-maildiensten die mettertijd beter lijkt te worden. Gmail wordt al geleverd met een reeks geweldige functies zelf, maar er zijn talloze andere tools beschikbaar, namelijk Chrome-extensies en Firefox-add-ons, waarmee je de functionaliteit kunt uitbreiden en verbeteren

(Technische en ontwerptips)