Internet Explorer… for some reason loved by many (i.e. those who have no idea how to download and install a new browser), hated by some (myself included).
I’m not gonna lie… it can be difficult to come up with inspiration for these blog posts. Sometimes I just have no idea what to talk about, particularly now that freshers & the summer are over and all I can really threaten (or advise?) fellow students with is this:
So, I’m going to try and get a bit more technical… back to the computer science-y roots! That way I sort of complain about my daily life, working as an intern in sunny old Leicester (pssst… I lied about that too) and also share random bits of knowledge with you.
So, on to rant #1. You spend hours designing and implementing a website… only to then remember you need to test for cross browser compatibility.
1. CHROME [✓]
2. OPERA [✓]
3. SAFARI [✓]
(now this is the point where you start to shiver in fear and expect something to go wrong)
4. FIREFOX [✓]
(now this is the point where you breathe a huge sigh of relief when you find the ever-diminishing Firefox somewhat cooperating with your new creation… then reality hits that you still have the mother of all browsers to test)
5. INTERNET EXPLORER [ lol ]
(now this is the point where you spin round on your office chair, open your bottom right draw, take out your darts and fire them straight at the picture of Bill Gates you have hung up on the back of your office door… praying deep down that your boss doesn’t open the door and take the fire instead – even though you will be the one getting literally fired).
But yeah, IE is a web developers nightmare and I’m going to finish this blog post with a solution I had to employ to a Bosch brand page I created where a certain style within my stylesheet just simply wasn’t being applied by Internet Explorer!
Basically, everything was appearing fine and dandy. Except an embedded YouTube video which was out of position on no browser except Internet Explorer (rumour has it, the poor browser struggles with Mathematics… maybe the developers need to come the University of Leicester and re-take the first year Discrete Structures module (CO1012) to redevelop (no pun intended) their skills.) So, I had to employ two different styles for the iFrame. One for customers viewing the page on Internet Explorer and one for those viewing on another browser.
Credit where it’s due to this bloke who showed how to detect IE11 and below: http://ageekandhisblog.com/use-php-to-detect-internet-explorer-11-and-below/
Then using that, within the PHP I created a function which returns either true or false based on the condition “preg_match(‘~MSIE|Internet Explorer~i’, $_SERVER[‘HTTP_USER_AGENT’]) || (strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Trident/7.0; rv:11.0’) !== false)“.
Then I had another simple check which – yep, you guessed it – checks whether the function returned true or false. If true was returned, I stored the value of a variable $style as the IE-compatible ID name within the stylesheet otherwise I stored the value of the regular stylesheet ID name in the variable. The variable was then set as the id of the iFrame so that the styling was applied like so: ‘id=”<?=$var?>“‘.
So, to conclude, the thought and execution process was as follows:
- Check the site users browser.
- Create an empty variable.
- If the user is on Internet Explorer, assign the value of the variable as the name of the IE-specific style name.
- Else, assign the value of the variable as the name of the non-IE-specific style name.
- Call the dynamic variable when specifying the id of the object we are ‘styling’ – in this case the YouTube video or iFrame.
- Sit back and enjoy. Feel like a boss. The IE beast has been defeated, perhaps not in ideal fashion but whatever it takes to get the job done… right?
Note: I know my solution wasn’t the most efficient or greatest solution, but sometimes you just have to take the easy & quick way out 🙂
Note #2: I will speak to those who run the University of Leicester studentblog site to introduce an addon to allow me to show code in an easier to read manner for future posts.