What mime type should WOFF fonts be served as?

I am serving truetype (ttf) fonts as font/truetype and opentype (otf) as font/opentype, but I cannot find the correct format for WOFF fonts.

I have tried font/woff, font/webopen, and font/webopentype, but Chrome still complains:

"Resource interpreted as font but transferred with MIME type application/octet-stream."

Anybody know?

In January it was announced that in the meantime, Chromium will recognize "application/x-font-woff" as the mime-type for WOFF. I know this change is now in Chrome beta and if not in stable yet, it shouldn't be too far away.

I just saw this: *|*:link with firebug, it's some default styling which firefox appends, but what does *|* mean?

Means:

Apply this to all elements | all namespaces that have a :link.

More on universal selectors and namespaces.

I have been looking at a HTML 5 boilerplate template (from http://html5boilerplate.com/) and noticed the use of "?v=1" in URLs when referring to CSS and Javascript files.

1. What does appending "?v=1" to CSS and Javascript URLs in link and script tags do?
2. Not all Javascript URLs have the "?v=1" (example from the sample below: js/modernizr-1.5.min.js). Is there a reason why this is the case?

Sample from their index.html:

<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">

<!-- For the less-enabled mobile browsers like Opera Mini -->
<link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">

<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="js/modernizr-1.5.min.js"></script>

<!------ Some lines removed ------>

<script src="js/plugins.js?v=1"></script>
<script src="js/script.js?v=1"></script>

<!--[if lt IE 7 ]>
  <script src="js/dd_belatedpng.js?v=1"></script>
<![endif]-->


<!-- yui profiler and profileviewer - remove for production -->
<script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
<script src="js/profiling/config.js?v=1"></script>
<!-- end profiling code -->

Thanks in advance.

These are usually to make sure that the browser gets a new version when the site gets updated with a new version, e.g. as part of our build process we'd have something like this:

/Resources/Combined.css?v=x.x.x.buildnumber

Since this changes with every new code push, the client's forced to grab a new version, just because of the querystring. Look at this page (at the time of this answer) for example:

<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">

I think instead of a revision number the SO team went with a file hash, which is an even better approach, even with a new release, the browsers only forced to grab a new version when the file actually changes.

Both of these approaches allow you to set the cache header to something ridiculously long, say 20 years...yet when it changes, you don't have to worry about that cache header, the browser sees a different querystring and treats it as a different, new file.

I need to maintain & improve an existing website and I am drowning in the redundancy I have discovered in its CSS stylesheet. Given the existing redundancy and non-methodlogical ordering of elements, it's hard to track and predict how a minor change will propagate through the system, or where to apply a change to achieve a certain effect, without spending a lot of time re-learning the CSS file and experimenting.

I have been using the latest Firebug and "Web Developer" add-ons for Firefox, but clearly they are not sufficient for me. I need a tool that can tell me where redundant "overrides" are and perhaps suggest a better cascading scheme.

In other words, help me generate the shortest CSS file that provides the same exact visual functionality that I have right now.

To further clarify, I am not looking for a tool that replaces "#000000" with "#000", "0.5em" with ".5em", "white" with "#FFF", etc. (this addresses "number of characters" redundancy, but doesn't address the "cascading logic" redundancy). I am looking for a tool that can tell me, for example, that a "font-size: 10px" attribute of a child element is redundant because it is already inherited from its parent.

A more advanced feature: "color: #000000" attribute of a class or an id is redundant because it is not used in any of the HTML/PHP files on the website.

Is there a tool that does this kind of "normalization" automatically?

For finding duplicate/unused/unnecessary CSS based on your markup, you can try out WARI, or Dust-Me Selectors (as @Aaron D mentioned), or CSS Crunch. The last two are browser extensions (for Firefox and IE, respectively), which will only look at one page, while WARI is intended to look at an entire site. However, I've not had much luck getting WARI to work.

Which HTML5 reset CSS do you use and why? Is there one that you've found to cover more cases?

I've started using HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ It seems to work, but I'm wondering if there is something better out there.

Here's two you might try out:

http://html5reset.org/

http://html5boilerplate.com

What is the difference between pt and px in CSS? Which one should I use and why? Thanks in advance. :)

Here you've got a very detailed explanation of their differences

http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

The jist of it (from source)

Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). Pixel stands for "picture element" and as you know, one pixel is one little "square" on your screen. Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

I used to think that everyone used relative paths (e.g. /styles/style.css). But I wonder why some popuar web designers (e.g. http://www.getfinch.com and http://31three.com/) use absolute paths (http://example.com/styles/style.css).

So basically I'm asking why some professional designers are using absolute paths instead of relative paths?

Both of those are using ExpressionEngine CMS, it's probably the way the CMS links the stylesheets.

But really it's just a matter of preference. Personally I go with root relative /css/main.css because this way if I'm developing locally + offline I don't have to worry about switching the WEB_ROOT constant to a local one ( less hassle + shorter ).

The only case I see for absolute is if the domain uses a CDN ( content delivery network ) and the domain is different from the origin domain.

I am pretty familiar with CSS and have used quite a bit of javascript and jquery also little experience of layout designing and working closely with Photoshop. But, somehow I don't feel as confident as when programming with database or C# side and face lot of problems when I am working with designing UI and laying out elements the way I want, For e.g. Like say a .psd file which the designers give to you...and you want to make your page look exactly like that..

So I know I just have to get into doing it more and learn along the way. But does anyone have any good suggestions or advice so that I get better at the UI programming...If there are some websites with videos and tutorial or any good books I should refer to improve..Thanks all for your help..

I installed firebug 2 years ago and immediately found myself spending more time reading other people's code - if I see a site I like or a technique I want to use, I just firebug it - it's a bit like a musician reading sheet-music and imagining how it sounds

I've found that answering questions on this site has helped me lots too - you get to know just exactly what it is that you do know and you become more aware of the areas in which you need to improve

I think that it's really important to know how the box-model works and how to make it work for you in all browsers - there are a few really simple fundamental rules, which when obeyed, help you to ensure that your x-broswer testing is pain-free - knowing how to add padding or margin to something without breaking your layout allows you to be exact with your designs - I used to leave 20 pixels extra horizontal space in my containers as a way of making my columns never dropped off the edge of a page, but now that I know how the box-model works, I can use the exact widths, heights, padding and margin that are detailed in the mock-ups that I'm given

I personally recommend using a semantic stylesheet framework - I suggest Blueprint semantic (although YUI and 960 are awesome too) - in-fact, switching to a CSS framework is perhaps one of the most important changes I made to my coding style last year and it helped me realise that almost all of the x-browser problems I was having were easy to fix without too much trouble

If you haven't done so already, add "CSS" and "HTML" to your "interesting tags" list in stackoverflow and read as much as you can. Answer questions, take the down-votes on the chin, savour the up-votes and keep trying to help others with their problems

One thing a lot of people forget is this: CSS is actually a really complex language. There's a hell of a lot more to it that meets the eye and it's very difficult to master - just.keep.fighting.the.good.fight

My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.

JQuery can be used if this cannot be done in pure CSS.

The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.

The ration between the top half and bottom half is always 50% 50% independent of browser resolution.

I would also like if both the top and bottom parts are fixed.

In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.

It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)

Is this possible with just CSS? How would you do it?

If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid? I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.

Edit 1

Oh yeah, I have a WIP too: http://meyers.ipalaces.org/extra/

It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.

I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.

Edit 2

How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart

Edit 3

I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.

I have successfully came up with 2 ways to do this:

Method 1

Click here to view demo

Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.

This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...

---

Method 2

Click here to view demo

Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)

Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.

Problems

• CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
• Creates excessive lag in all current Internet Explorers

This is a duplicate from UI.StackExchange.com:
http://ui.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Should you ever apply percentage and fixed CSS together? Will it cause problems, and if so what kinds?

• Does mixing degrade browser render performance?
• Will mixing give you weird results on initial load with progressive rendering browsers?

Below is just a dumbed-down example of mixed usage, it could be any mixture. I am not looking for validation of the example. I have heard you should never do what I have in the example below, so I am trying to find out if using CSS in this manner is an issue.

Example mix usage:

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>

+1 Good question. You may want to have a look at this article: "Fixed-width, liquid, and elastic layout" It goes over fixed width layout (em) and elastic layouts (%), and if you click to go to the next page it looks at 'Elastic-liquid hybrid' - where width: is set one way, with max-width: set the other. I know the article linked to above isn't exactly what you asked, but it's an example of mixed use within a single CSS style.

---

Edit: After some further reading I did find a quite a few contradictory opinions on the subject. I found several articles that held the idea that "you just can’t mix up pixels and percentages". Though, for the most part, these sites were fairly dated. When I narrowed the search to only articles that have been put up within the past year, things changed a bit. There were still a few opinions against mixing, but they typically didn't explain why, and seemed to of the "I always heard it was a bad idea" variety. The majority of more recent information that I've found on the topic seems to indicate that mixing percentage with fixed widths is a perfectly acceptable practice, as long as it's done with an understanding of the results.

see:

• "Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?" (Jul 01 2010)
• "For A Beautiful Web: Changing Man Layout" ...

Full Disclosure: I've been a mixer for many years, without really knowing whether my approach was 'correct.'

Is it possible to select, say, every fourth element in a set of elements?

Ex: I have 16 <div> elements... I could write something like.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

is there a better way to do this?

Well, it's called nth-child(), so use the n variable and work with it (you can perform addition (+), subtraction (-) and coefficient multiplication (an where a is a number)):

div:nth-child(4n)

Also, for pseudo-classes, use :, not ..

---

By the way, there's not much of a difference between 4n and 4n + 4 with regards to nth-child(). If you use the n variable, it starts counting at 0. Subsequently, this is what each selector would select:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n + 4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

Both select the 4th, 8th, 12th and 16th elements that you're looking for. Therefore, there's no difference in your question's context.

Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.

I have one slight problem, not a big deal but still a little annoying. I have:

<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal

Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!

Here is my css:

h1 {
 color:#FFFFFF;
 font-size:18px;
 line-height:22px;
 font-weight:bold;
 margin-top:0px;
}

h2 {
 font-size:12px;
 color:#333333;
 font-weight:bold;
 margin-bottom:-5px;
}

p {
 color:#333333;
 font-size:12px;
 line-height:18px;
 font-weight:normal;
}

Thanks in advance.

I believe you are looking for this in your CSS:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

Is there any tool which can automatically convert shorthand css to longhand? I need this cause I want to use SmartSprites which does not work well with shorthand.

And prefably also a tool which does the reverse, so after the sprite computation i can minify the css as much as possible...

Also any other solutions for automatic spiriting is welcome, basically im looking for some command line tools which can be integrated into the build process so that the developers still develop on the raw css code.

You can use Dragonfly on Opera. Dragonfly is like Firebug on Firefox and Chrome but developed by Opera. There is a function in Dragonfly which let you alter the shorthand and vica versa. Check dev.opera.com/articles/view/introduction-to-opera-dragonfly/

I found the css border on the table cell is lost when applying css gradient filter at the same time. It seems that the gradient effect overrides the border.

Is it a browser bug or am I missing something here?

The style is defined like this:

.c7 {
    color: #000000;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0'); 
    border: #000000 1px solid;
    width: 100px;
    height: 30px;
}

[Update] You could apply an opacity filter and reduce it from 100 to 1, and you can see how border emerges gradually. It confirms my guess that the gradient effect shows over the border.

I've found a fix but you may not like it...

If you render in IE in quirks mode the border renders fine, it is only obscured if you're using compatibility mode. Compare these two pages in IE8:

• With a DOCTYPE declaration
  • 
• Without a DOCTYPE declaration
  • 

What also works is clicking the compatibility view button, but my attempts to get the same results with the compatibility mode meta tags were unsuccessful. I tried using box-sizing, but also with no success. I conclude the only way to get it to work as you want is to force IE into quirks mode, but that may create so many other issues for layout that you may be better off just adding a wrapper element to attach your gradient background to.

<div class="alert error">
      <p class="denied">adfafdadfadsf</p>
</div>

div.alert.error {
background:url("v3.png") no-repeat scroll 7px -643px #FFEEEE;
}

Does the selector "div.alert.error" mean the following?

select DIVs that contain both class alert and error.

Is there a different between

CaseI:   div.alert.error
CaseII:  div.alert .error
CaseIII: div .alert .error

Thank you

CaseI:   div.alert.error

A div with classes alert AND error. <div class="alert error">

CaseII:  div.alert .error

An element with class error that is a descendant of a div with class alert.

CaseIII: div .alert .error

An element with class error that is a descendant of an element with class alert, that in turn is a descendant of any div.