Generate breadcrumb chevrons using pseudo-elements #407
Conversation
This allows us to get rid of another two images, scales cleanly when zoomed, and ensures that the chevron is retained when users override the colours in their browser.
There was a problem hiding this comment.
Generally looks good and great comments @36degrees 💯
However this didn't work for me on IE8 (Browserstack) on /components/breadcrumbs. This appears to be because the component view, along with a couple of others, uses layout-debug which doesn't include govuk-frontend-oldie.css for IE8. Not sure why the layout is different for those, this might have been a conversation I missed.
|
Yeah, I had to do some faffing about to get it to render correctly for IE8. I haven't committed that work because it wasn't a particularly good solution to the problem and it didn't feel like it should be part of this PR. |
|
I actually think it looks okay on IE8 once the correct stylesheet is linked up (well what I can see on Browserstack anyway...). I don't think we should spend ages making things look perfect for IE8, functional is enough 🙂 |
|
Are you happy with this then @hannalaakso? |
This allows us to get rid of another two images, scales cleanly when zoomed, and ensures that the chevron is retained when users override the colours in their browser.
Chrome 63
Firefox 57
Firefox 57 with custom colours
IE 8 (Windows 7)
IE 9 (Windows 7)
IE 10 (Windows 7)
IE 11 (Windows 7)
Edge (Windows 10)
Opera 12.16 (Windows 8.1)
Kindle Fire 2 (Android 4.0)
Samsung Galaxy S5 (Android 4.4)
iPhone 5s (iOS 7.0)
iPhone 6 (iOS 8.3)
https://trello.com/c/0I5XLLwU/520-generate-breadcrumb-chevrons-using-pseudo-elements