CSS3 Border Radius inschakelen in Internet Explorer 8 en lager

CSS3 geeft ons de mogelijkheid om afgeronde hoeken te maken met de eigenschap randradius. Maar zoals u wellicht al weet, wordt deze nieuwe functie niet herkend in Internet Explorer 8 (IE8) en eerdere versies. Dus wanneer u CSS3 Border Radius toepast op een element, verschijnt het nog steeds als een doos met puntige tips.

Mogelijk vindt u veel verschillende adviezen op het internet, waardoor u IE8 zou kunnen negeren. Je zou willen dat je dat kon. Maar als u op een website werkt voor een overheidsinstelling of een bank, heeft u misschien geen keuze. U moet de website er nog steeds net zo mooi laten uitzien als in moderne browsers, inclusief de mogelijkheid om CSS3 Border Radius toe te passen.

Als u uw website IE8-klaar moet maken, terwijl u de CSS3-functie kunt gebruiken, hebben we alleen de tip voor u.

CSS3Pie

CSS3Pie is een soort polyfill voor CSS3 decoratieve functies. Afgezien van CSS3 Border Radius die we in dit artikel gaan bespreken, ondersteunt CSS3Pie ook Box Shadow en Gradients, hoewel het beperkt is tot het type Lineaire Gradient.

Download CSS3Pie (hier). Zet het in je projectdirectory - ik plaatste het in de css- map. Zoals je ook kunt zien aan de hand van de onderstaande schermafbeelding, heb ik één stylesheet en één HTML-bestand gemaakt.

Open de stylesheet in de code-editor en stel een van de elementen in het HTML-bestand in met afgeronde hoeken, zoals:

 .border-radius {height: 100px; breedte: 100 px; achtergrondkleur: # 2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; grensradius: 50px; } 

Omdat de breedte en hoogte van het element beide 100 px zijn en de grensradius is ingesteld op 50 px, wordt het element een cirkel:

In IE8, zoals we verwachten, zou het nog steeds een vierkant (zucht) zijn, maar maak je geen zorgen.

Als u het afgeronde behavior: url(css/pie.htc); wilt inschakelen, voegt u deze regel toe: behavior: url(css/pie.htc);, zoals zo.

 .border-radius {height: 100px; breedte: 100 px; achtergrondkleur: # 2ecc71; -webkit-border-radius: 50px; -moz-border-radius: 50px; grensradius: 50px; gedrag: url (css / pie.htc); } 

Houd er rekening mee dat het bestandspad in url() een absoluut pad moet zijn of relatief ten opzichte van het HTML-bestand. U kunt deze regel ook in een apart bestand toevoegen.

Mogelijk hebt u een stylesheet die is bestemd voor Internet Explorer. U kunt behavior: url(css/pie.htc); in dat bestand, maar zorg ervoor dat het wordt gedeclareerd in dezelfde CSS-selector, zoals zo.

 / * gedeclareerd in ie.css * / .border-radius {behaviour: url (css / pie.htc); } 

Ververs de pagina in IE8. De afgeronde hoek zou nu moeten werken (ta-da!). Het zou ook in IE7 moeten werken.

Probleemoplossen

Internet Explorer kan onverwacht gedrag vertonen. Als dit niet werkt (misschien werkt de afgeronde hoek niet of is het geselecteerde element verdwenen), dan zou het probleem moeten worden opgelost door de position en zoom toe te voegen:

CSS3 Pie gebruiken in WordPress

U bent klaar met het plaatsen van uw website in HTML-vorm. Je gebruikt ook pie.htc op de website om CSS3 in IE8 in te schakelen. In deze fase bent u klaar om de website te transformeren in een functionerend WordPress-thema. In dit geval, aangezien WordPress dynamisch is en pagina's kunnen worden weergegeven in URL's van verschillende niveaus, moeten we een absoluut pad opgeven.

U kunt het pad in CSS op deze manier wijzigen:

 .border-radius {behaviour: url (http: // localhost / {website} / wp-content / themes / {the_theme} /css/pie.htc); positie: relatief; zoom: 1; } 

Of voeg interne stijlen toe in header.php, op deze manier:

Laatste gedachte

Het hebben van coole dingen zoals CSS3 Border Radius werk in IE8 is fascinerend, en CSS3Pie maakt dat mogelijk, terwijl het ons een minder reden geeft om IE8 te haten.

15 online typografiehulpmiddelen die alle ontwerpers moeten weten

Typografie vormt de basis van elk ontwerp, omdat lezen een van de meest basale dingen is die we op internet doen. De typografie die u kiest, heeft invloed op meerdere aspecten van een website, inclusief leesbaarheid, gemoedstoestand en de algehele gebruikerservaring . Het is essentieel voor ontwerpers en ontwikkelaars om de basisprincipes van typografie te kennen om leesbare aangename ontwerpen te maken

(Technische en ontwerptips)

Deze slimme truc brengt bezoekers terug wanneer ze weg Tab

Hoe vaak open je een artikel, schrap je een paar zinnen en klik je vervolgens weg om door een ander tabblad te bladeren? Ik ben hier dagelijks schuldig aan. Het is niet zo eenvoudig om de aandacht van een bezoeker te trekken en daarom kan het Do not Go-script zo waardevol zijn.Door dit script aan uw pagina toe te voegen, kunt u het favicon en de paginatitel van uw site automatisch bijwerken wanneer de pagina momenteel niet wordt bekeken

(Technische en ontwerptips)