Building smart websites for small businesses

Tag: css

1 to 10 of 29 posts tagged with cssview tags

A Theme Switcher: now this looks like the perfect way to create a high contrast version of your site:

filter: invert(100%)

Unfortunately the filter property isn't widely supported yet, and there are a few caveats that need addressed, but it looks like a really lightweight method.

Microsoft Edge @font-face not displaying all fonts

At Doepud we rarely find annoying bugs with browsers these days, partly because we like to keep our CSS and JavaScript simple, but mainly because browser vendors do a great job sticking to standards and delivering a consistent experience across a wide range of devices. It was a surprise then to find, when showing a client a demo version of their new site, and on a web browser that we normally consider to be pretty decent (Microsoft Edge) a very unusual bug feature. The issue was related to @font-face, or more specifically @import, with the main headings not displaying the embedded font as expected.

Firefox, Chrome and Opera all ok... but not Edge

Everything was working fine in Firefox, Chrome and Opera but not Microsoft's Edge browser (as it happened, we also found the issue extended to Internet Explorer 11).

Media Queries

Turns out that within our CSS file, when requesting fonts (using @import) inside a media query, like this:

@charset "utf-8";

@media screen {
    //imports
        @import 'normalise';
        @import 'fonts';
...

...Microsoft Edge (and IE11 let's not forget) opted to ignore them entirely. So, moving the @import rule up and outside the @media screen resolved the issue:

@charset "utf-8";
@import 'fonts';

@media screen {
    //imports
        @import 'normalise';
...

Some things never change eh? Microsoft have always liked to do things their own way.

Keeping aspect ratio of YouTube videos

Experiments in fixed aspect ratios is a handy CSS technique from Stephanie Liu for displaying video embeds in a responsive website without losing their aspect ratio.

The HTML:

<div class="container">
  <iframe class="embed"></iframe>
</div>

The CSS:

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25% // 9 / 16 * 100%
}
.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

CSS ICON, not just a decent sized collection of icons made entirely with CSS but also a very slick animated function to swap between two icons.

  1. accessibility
  2. social networking
  3. software
  4. security
  5. usability
  6. copywriting
  7. email
  8. browsers
  9. technical
  10. marketing
  11. seo
  12. news
  13. ecommerce
  14. law
  15. help
  16. css
  17. design
  18. blog
  19. business
  20. analytics
  21. mobile
  22. spam
  23. hardware
  24. cms
  25. domains
  26. fun
  27. brand
  28. misc
  29. advertising
  30. social media
  31. blogging
  32. podcast
  33. typography
  34. clients
  35. rss
  36. services
  37. privacy

©Doepud 2006–2018. All rights reserved.