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.

Doorzoek uw Chrome-geschiedenis met een diepere geschiedenis

Browsen met tabbladen is een ingenieus idee. Het enige dat u hoeft te doen, is al uw links openen op een nieuw tabblad en u kunt de tabbladen op de achtergrond laten laden terwijl u uw artikel leest of uw video bekijkt op een enkel geladen tabblad. Als het echter gaat om het opnieuw bezoeken van een site die u ooit heeft gelezen, is het lastig om de link te vinden en op te halen uit uw Chrome-browsegeschiedenis

(Technische en ontwerptips)

5 Tools om uw workflow en online samenwerking te beheren

Succesvolle ontwerpteams vereisen veel dingen: individuen met vergelijkbare vaardigheden en verschillende vaardigheden, een projectmanager of een teamleider die alles samen kan trekken en een omgeving die actieve samenwerking stimuleert .Bij afwezigheid van sterk leiderschap, of een gebrek aan het vermogen om open of vrij samen te werken, kan de kans op succes van een team worden ondermijnd, ongeacht welke vaardigheden aan de orde worden gesteld

(Technische en ontwerptips)