06/18/12 – Assign a movable Windows WAMP server.


  1. #1 by webdevelopmentwebsite on July 2, 2012 - 4:23 pm


    Howdy, folks! Welcome to the new incarnation of Swell Magazine’s Q&A. It’s going to work like this: you send within questions you have about CSS, and leastwise once a month we’ll decide the leaders questions and answer them so that everyone can benefit from the exchange. Your press could be active a very specific problem you are having, or it could metal a question about philosophical approach. We’ll take every kinds.
    We’ve done a bit of this before with a wider scope, then whether you enjoy language the Q&A, check out my author archive for more of them.
    Box Sizing
    Question from Brad Frost:

    What are your thoughts on Paul Irish’s idea to apply box-sizing: border-box to every element on the page?
    Using box-sizing is super-helpful, especially all for mobile and responsive design (for example, getting fully fluid form fields with constant amounts of padding is awesome). But I’m leery of applying it to everything.
    Anyway spectator support (I’ve already be issues with some less-than-smart mobile browsers), can you think of any downsides to this method?

    An armchair critic of this technique would whine about the performance of the universal selector (*). This whine has been largely debunked. While this selector technically is “slower” than something like a class heading selector, the difference is negligible, except in extreme cases of overuse or on pages with zillions of elements. Doing something that reduces one PROTOCOL content makes at least an lay down of magnitude bigger difference than optimizing selectors.
    For the record, the complete and recommended structure is this:

    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    With this, you essentially get perfect browser support in everything — even the vast majority of mobile Webkits. The worthy exception is IE 7 and down. I don’t privation to open a can of worms, but I.E. 7 usage is already low and dropping much faster than IE 6 did, so supporting only IE 8+ will be commonplace terribly shortly.
    Here’s a quick primer on why using this box model is nice:

    Now, when you bundle a depth and height, the element will always be that width and height, regardless of padding and borders.
    This makes math a mickle easier. All for example, you could easily make a four-column grid by making the width of each column 25% and floating them. You could formulate gutters out of pixel lining and not worry that they will expand the columns and recess the grid.
    It’s also extra useful for text areas that you want to fill to their parent’s width, which you can only do by setting their width to 100%. Merely then you wouldn’t be able to have lagging unless you used this packet model, lest they expand beyond the parent’s distance.

    You approach a mess with a mobile browser but not exactly what the trouble is or which mobile browser. It would be interesting to know which browser and what the problem is, so if you could follow up in the comments, that would be great.
    For me, I’m using it on everything I build from here on out. It’s been fantastic so far, and I see no reason not to go with this empirically better trunk model.
    CSS Sprites Workflow
    Question from Matt Banks:

    What’s your preferred method for creating and managing CSS sprites? Do you use Photoshop to manually create your own sprites, a Web service or an app like SpriteRight? For updating sprites with new imagery, what workflow is best and easiest?

    I have an article from 2010 astir my progress for CSS sprites, in which tread 1 is this:

    Ignore sprites whole. Make every background image its ain separate image and reference them as such in the CSS.

    Logically , I’m not suggesting that you don’t use sprites. Quite the contrary: I focus using sprites and having a good workflow are paramount to being a good front-end coder and often the number one thing you can do to optimize Web performance. What I was trying to say is don’t pre-optimize. Pre-optimization is quicksand for developers: you devote a muckle of instance flailing your arms but not getting anywhere. You know that sprites are dandy, and so you start property with them right away, spending all kinds of time tweaking and adjusting and calculating the sprites to be right right during development.

    (Image: electricnerve)
    This is a waste of time. Instead, ignore sprites on new projects until you’ve reached a comfortable level of maturity with your CSS or are just about to walk live. Then, take the time to go through and get yourself all sprited ahead. It will be easier and faster.
    In terms of progress, I’m still a fan of SpriteMe, which is a bookmarklet that finds images occupied on your page and advocates or creates a elf for you and even helps you with the CSS. SpriteMe only works on cardinal leaf at a time, though, which might not be suitable enough all for complex apps. I’m also a full-size admirer of SpriteCow, in which you handcraft your own sprite (in Photoshop or some other image-editing system), and then it helps you identify the parts with a really great UI and gives you the CSS needed to use a particular image inside the sprite. I think the SpriteCow workflow is a bit better because you are working from a sprite that you made yourself by looking through your images directory, so it’s more comprehensive and to your personal mode.
    To take property to the next level with your CSS sprites workflow, you should really draft retired however Compass handles it. RailsCasts has a screencast that teaches you nearly it. It’s pretty awful. You rightful spend individual images as normal (remember, with no pre-optimization) and drop them into associate images catalogue. Compass will see the sunrise image and automatically add it to a master sprite image. It creates a type name for the new image, with each of the correct filler and positioning. Next, anywhere you want to use this different image as a sprite, either use that class in your HTML or @extend that class within your CSS. Efficient, easy and super-fancy.
    Question from Jakob Cosoroaba:

    All boxes are quadrate to the spectator. What’s the best way to fake a triangle box?

    To arranged the stage present, you can “fake” a triangle in a number of ways. The most common is by exploiting the fact that borders end at an angle when they touch each other at corners. So, by collapsing a box to a width and height of 0 and setting the color for only one border, we can make a polygon. A lot of examples of this are on Shapes of CSS. We could draw a triangle with SVG or canvas. We could even make a triangle, near linear-gradient as the background of an element, as easily as this: background: linear-gradient(45deg, white 90%, blue 90%); (with all of the vendor prefixes, naturally ).
    But no of these techniques volition help America here. In his original question, Jakob Cosoroaba lists two techniques that he has tested. One involves rotate transformations and the clip place; the problem being that IE 9 has too large of a rollover county (i.e. it’s not limited to the triangle). The second technique uses slightly less markup, using only rotate transformations; the problem here being that you cannot add content inside. This made clear what he needs:

    The means to put content inside;
    The ability to make the triangle (and only the trigon) a link.

    Jakob, you should have taken your already clever work only a pace further! By combining your ii techniques, you could engender the link the proper volume (even in IE) and put content inside. Just make the link sit on top with z-index.

    Here’s a demo of the combined techniques.
    Yep, doing this with markup feels a tablet hacky. This is just one of those things that CSS isn’t great at right now.
    Server-Side Optimization
    Question from Patrick Schreiner:

    I was wondering whether you could provide some wisdom into what one should detain mind for server-side optimization and performance once it comes to CSS? Are there any cerise flags to look retired all for? What’s your approach to making sure that code performs well and that it’s optimized for heavy server-side optimization?

    I’m not a grave server-side man, but I can list some tips that might be helpful. Perhaps some server tribe can help out in the comments.

    Just serve CSS straight up.
    … Not PHP that has to glucinium run and that then serves as a CSS content type, and not LESS that needs to be interpreted client sideways — just grassland old CSS.
    Serve it compressed.
    There is nary reason for CSS to be optimized all for quality readability. Strip out all non-relevant albescent space and comments.
    Gzip it.
    If you’re moving an Apache server (lawfully likely), you could put an .htaccess file astatine the root of your website that tells the server to serve your CSS Gzip’ed. Check down the code starting at line 162 in HTML5 Boilerplate’s .htaccess file for how to do that.
    Cache it.
    The fastest report is one you don’t must serve at all. So, when you do serve a CSS file, tell the browser to keep it around for a drawn-out time (a year is a good rule of thumb). Then, if you change the CSS, you can break the cache via changing the file’s baptize (for variety, worldwide.v23453.css). Check out the code starting at chain 267 in HTML5 Boilerplate’s .htaccess folder all for how to follow that.
    Keep it small.
    If your CSS file is 2 MB, you’re doing it misguided. Maybe you need to seize a spot more OOCSS in your approach, doing things more modularly beside very reusable bits of style.
    One, two or 3
    That’s how many CSS files should be loaded on any specified page. Cardinal provided the website is one page. Two for websites of medium complexity, using a global CSS file that every pages need and a second file for subsections of the website that are different enough to warrant one. Three for somewhat complex websites that need global, section-specific and page-specific styles.

    Save up the bad questions, folks! Got a good one? Send it within, and we’ll pick the best for the next printing.

    © Chris Coyier for Slap-up Magazine, 2012.Date: 2012-06-14T16:01:50Z

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: