All articles tagged HTML

  • The circle is complete - packaging web as a .exe

    At work got a request to package a website for offline use. This time the time was very pressing and needed to be done in a few hours. I decided to test out node-webkit and see how it worked. And it works just fine! We tweaked the website to save it’s info to a WebSQL-db and then packaged a Mac-app and a Windows-app which just works!

    It worked so good I decided to test how far I could take this. So I decided to build a VCR for the swedish public service. It’s a very simple proof of concept that runs in the packaged browser and uses ffmpeg to save a HLS-stream to the desktop. Since node-webkit uses nodejs you have all the npm-packages at hand, and there is very nifty little wrapper called fluent-ffmpeg that handles all the communication with ffmpeg. You can take a look at the code over on Github

    And will we’re at it, you can also checkout AppJS, TideSDK or Awesomium=)

  • Styling a select box with CSS - revisited

    My earlier blogpost on styling a select box has gotten a lot of traction lately and this is an updated version of that. The previous example actually used an image, although I said it didn’t;-)

    This is the updated HTML, I just added one tiny element, a small price to get rid of an image.

    <div class="styled-select">
        <span class="arrow"></span>
        <select>
            <option>One</option>
            <option>Two</option>
        </select>
    </div>
    

    The new span is styled to an arrow and a separator with the following code (this is not the complete CSS, please visit the jsfiddle for that).

    .arrow {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 10px solid #A0A1A4;
    }
    
    .arrow:before {
        content: '';
        position: absolute;
        top: -15px;
        left: -12px;
        height: 19px;
        border-left: 1px solid #27292C;
    }
    

    Take a swing at the new jsfiddle and see if you can come up with a neater solution! =)

  • The state of font-face

    Embedding fonts on a web page can be a chore, and getting all the little bits just right can take quite a while to iron out.

    The advice so far has been to convert your font and serve four different file types, an EOT, a WOFF, a TTF and a SVG. So I decided to actually check if that really is necessary.

    To make this mission I just went to caniuse.com and made some screenshots, so let’s compare those screenshots.

    The support for TTF/OTF

    Supported by almost all browsers, except IE and Opera Mini

    The support for WOFF

    IE supports this a bit better, but just for IE 9 & 10.

    The support for EOT

    Excellent support by IE, but only IE, but all the way back from IE 6!

    The support for SVG

    Supported by all browsers, except IE lower than 9, and I (and others) have experienced that the SVG looks wonky sometimes. Especially on Chrome on Windows.

    So my advice would be to ditch the WOFF, and due to IE’s partial support for TTF it’s best to serve the EOT before the TTF. So, serve the font files in this order:

    1. EOT (IE)
    2. TTF (Chrome, Firefox and others)
    3. SVG (Opera Mini)

    And there you should have covered all bases and your site should look fine and dandy (hopefully;-).

    Any thoughts or comments, please write a comment =)

  • Styling a select box with CSS

    UPDATE: I made some changes to this solution, take a look!

    Working with a designer that loooves to over design native HTML components is a . You do all these ugly hacks and replace a select box with a ul/li list and do negative margin on the original etc etc. And no matter how much you try you never achieve the same completeness as the native element. But it is possible to style a select box with just CSS3.

    I found this example but it uses an ugly hack to get rid of the native dropdown arrow, it wraps the select box in a container that has a fixed width and overflow:hidden, then it sets the select box to a fixed with that is wider than the container. Sure it must be a better way to get rid of it, and yes there is.

    You can get rid if all the styling of a select box, but since our beloved browsers handle things differently you have to use a bit of tweaking.

    This is the HTML we are gonna be using

    <div class="styled-select">
        <select>
            <option>One</option>
            <option>Two</option>
        </select>
    </div>
    

    Styling for the container, this is where we set the custom arrow, gradient etc, but no width, so it will just wrap the select box nicely.

    .styled-select {
        height: 21px;
        line-height: 21px;
        overflow: hidden;
        border: 1px solid #27292c;
        border-radius: 3px;
        background: url('bg.png') no-repeat right #494849;
        box-shadow:inset 0 0 1px #393939;
        -moz-box-shadow:inset 0 0 1px #393939;
        -webkit-box-shadow:inset 0 01px #393939;
    }
    

    And on the real select box we hide the styling, and set the background to transparent, but for IE we have to apply the hack I linked to earlier, but now with a relative width instead of a fixed one.

    .styled-select select {
        -webkit-appearance: none;
        -moz-appearance: window;
        background: transparent;
        width: 100%;
        wid\th: 112%;   /* IE hack */
        padding: 1px 20px 0 3px;
        border: 0;
    }
    

    There you have it! A select box that is native and resizes just the way it should. If you want to test it, head to the jsfiddle! Comments are more than welcome=)

    UPDATE: I made some changes to this solution, take a look!

Page 1 / 1