Grow your CSS skills. Land your dream job.

CSS-Tricks Chronicle IV

Published by Chris Coyier

I had a weird problem this week where some mobile devices just weren't picking up on some CSS that was clearly linked to and loading on the vast majority of other browsers. It wasn't user agent based (I tried faking it). It wasn't screen size based. It was the device itself somehow. Turns out, I'm an idiot. I was doing this to @import the CSS:

@import "css/style.css";

Because, that's how you do it in Sass or LESS. Turns out that actually works in CSS in most browsers, but it's incorrect of course. This is correct:

@import url("css/style.css");

I could have fixed it by doing it correctly, but instead I fixed it by not using and @import which is pretty much always bad. Much better to get the CSS right in that stylesheet.

Update: Not using url() is valid per the spec, but tell that to some mobile browsers! (Thx Tab Atkins)


I've been bug fixing galore all week on this new design and I suspect there are many more weeks to come where most of my day is improving this design.


I turned on Twitter Cards data (about), as part of Joost De Valk's awesome SEO Plugin for WordPress. We'll see if they start working, that'd be kinda neat. I still think Twitter is awesome even though this is sad to me.


I've been spending my evenings preparing my brand new talk and workshop for BD Conf. They are both going to be about "A Web Designer's Workflow" and draw heavily upon my recent experience redesigning this site.


I changed over the video hosting for The Lodge videos over to Vimeo Pro. I'm hoping it is basically faster, provides a nicer player, supports more devices, and all while staying very high quality. The only hitch in the giddyup so far is that the Vimeo player is having trouble on the Kindle Fire and a few other Android tablets. I'm hoping this can be worked out.


CodePen is now on some big new fancy servers thanks to Tim Sabat, our server guy. In theory these bad boys will be scaleable for us forever.

Comments

  1. Braders
    Permalink to comment#

    Good luck with the rest of those pesky bugs

  2. Permalink to comment#

    I always considered @import to be generally unadvisable as link will load up the CSS in parallel rather than pausing the page load for a large external file. do you have a preference?

  3. I still can’t use the forum on my Samsung Galaxy SII, even after clearing the cache.

    The topic list looks great, but when I get into a thread, I get an ultra long column, with only the last comment displayed in a 20px (or something) column. :s

  4. I’m happy you explained the @import problem, as I’d seen your tweets but didn’t understand the problem.
    I guess I’ve been using SASS/LESS too much.
    Good job on finding it and not giving in though! You put an amazing amount of work into your cross-compatability.

  5. andyunleash
    Permalink to comment#

    Re: Vimeo – that was a good move. I kept getting errors from AmazonS3 on my iPad as it would freeze and then on refresh say “expired ticket” etc. Vimeo is much faster and no issues at all on any of the devices I’ve been using.

    • Permalink to comment#

      Very good to hear. Hopefully this will also speed up my ability to post new videos as well. I can’t wait for the day the whole lot of them is finally posted. (Few weeks is my guess.)

  6. pauldewouters
    Permalink to comment#

    Chris,
    have you read about Paul Boag’s experience with Vimeo? maybe something to consider

  7. Jack
    Permalink to comment#

    Great job with all this Chris. One thing though…The vimeo videos are blurry. Is it just me, or has someone else seen this?

    • Permalink to comment#

      Things to try: 1) Click the HD button on the video to switch to HD mode. 2) View in Full Screen Mode. 3) Download the video directly and watch locally. 4) Contact me about it and I can check to see if there is something weird with any particular video you’re having trouble with.

  8. Paul S
    Permalink to comment#

    Well, don’t I feel silly. The HD button did it. Never really noticed it there, just figured it was HD by default. Thanks!

  9. Permalink to comment#

    I’ve started checking in at CodePen daily to see what’s new. There’s some really great stuff going on there, and it’s proving to be a great resource in playing with the latest in CSS and JS.

  10. Bhaskar Machcha
    Permalink to comment#

    I liked the CodePen. it’s great resource to me get the new things about the CSS & Js….

  11. Chris. Have you tried testing this on Windows ? Chrome renders fonts so bad that the home icon looks like a pause icon to me and all the custom fonts are pixelated
    have you considered switching to images -specially in the main nav-

    • Permalink to comment#

      In his video (in the lodge) chris explains that hes using an icon font for the icons, this makes them scalable and still look good on retina/high res devices. I guess the compromise is that to make stuff look good on modern browsers/tech it perhaps doesn’t on older stuff

    • @Brendan Well, I’m using Windows 7 and Chrome 21 and I know that it’s a bug in Chrome but I just wanted to point that out

  12. Permalink to comment#

    Thus concludes the mystery bugs of using SASS and LESS. Don’t get me wrong, I think it’s a great idea. But, I am going to stick with just CSS. None of that server side mumbo jumbo. But, I’d be willing to try it out in the future.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".