Chrome "Resource interpreted as stylesheet but transferred with MIME type text/plain."

Chrome (8.0.522.237) isn't rendering a linked CSS file from an ASP.NET WebResource.axd (an embedded resource).

The following warning appears in Developer Tools - Resources:

Resource interpreted as stylesheet but transferred with MIME type text/plain.

In this case the issue was with the WebResource reference in the AssemblyInfo.cs

[assembly: WebResource("SampleNamespace.SampleCss.css", "text-css", PerformSubstitution = true)]

Should have been:

[assembly: WebResource("SampleNamespace.SampleCss.css", "text/css", PerformSubstitution = true)]

WEB202: Designing for HTML5 and CSS3

Speaker: Darren Wood @darren
http://www.dontcom.com
http://www.slideshare.com/darren131

TechEd Online

WHATWG - HTML5 workgroup. Different to the W3C
Ian Hickson

Why HTML 5?
- Support existing content
- Much reduced HEAD. E.g. Don't need to specify JavaScript as the scripting language used in the page.
- Less bytes, being more mobile friendly.

New Elements
article, aside, audio, canvas, command, datalist, details,figure, footer, header, hgroup, keygen, video.

header
- Replaces common CSS class that appears on the majority of pages.

footer
- E.g. contains copyright notice.

nav
Links to other documents. Primary navigation.

aside
- Related content. Separate to the main content but related.

section
- A section of a document. Can be nested.
E.g chapters of a book. Each section can contain an H1.'

article
- Similar to a section.
Use an article if it could be pulled out of the page and still be meaningful.

video
- Native video support.
- Can have a default image.
- Can provide different content for different browser.
audio
- Very similar to video tag.

Forms.
New input types.
- search
- email
- url
- tel
- range
- number
- date
- datetime
- datetime-local
- time

Attributes
- placeholder = "enter something here"
- autofocus
- Required
- autocomplete="off"

Semantics
- Less divs and meaningless markup.

Mircoformats.org
- Add further information.

Can now wrap block level elements in a anchor a

Javascript

Drag & Drop

Canvas
- Dynamic images.

document.getElementsByClassName('test');
document.querySelectorAll('.testClass');

localStorage
 - Megabytes of local storage with query syntax

Offline Application Cache.
- Good for mobile web apps

CSS3
Selectors
- Substring selector (begins, ends, contains)

Pseudo-class
- Match odd li elements
- li:last child.

p:empty
p::selected

Properties

- Vendor Prefixes
- opacity
- rgba - colour including alpha

Multiple background images to one element. Position them separately.

Image borders. border-image.

border-radius:
border-top-right-radius:

text-overflow: ellipse;

Transforms
- Good for roll overs
- skew, scale, rotate
- fade in and out on hover.

@font-face
http://typekit.com
http://www.fontsquirrel.com
https://fonts.google.com/

http://modernizr.com - helps older browsers work with HTML 5. Allows for CSS selectors for determining support level. Also object on the DOM for checking support.

http://mediaelementjs.com - script for embedding video and audio
http://css3pie.com - 
http://css3please.com - Shows cross browser versions of markup.
http://www.html5test.com - tells HTML support features for current browser.
http://www.html5rocks.com - Examples of what is capable.
http://html5doctor.com - Write ups on new elements, problems, issues.
http://goo.gl/51ma HTML5 schema for Visual Studio 2010.

Visual Studio 2010 CSS colour picker

Came across a Colour picker dialog for use when editing CSS files in the Visual Studio 2010 editor.

Right click on the style and select Build Style or
Styles (Menu) > Build Style

Safari and Chrome "Red link" CSS bug

Came across a rather obscure CSS bug recently.

All the hyperlinks in the page were coming out red, regardless of the settings in the stylesheets. It was possible to change other properties, such as the background colour, but the text was always red in Safari and Chrome. IE7 and Firefox 3 showed the text as expected. It was like there was something overriding the defined styles.

Turns out the page in question had a CSS link in the HEAD tag to a file that didn't exist. The 404 page coming from IIS included styles to set the text to red. Somehow Safari and Chrome were using the styles defined in the 404 page as the CSS to be included. As the missing CSS file was the last in the list it was replacing the hyperlink colour.

Found another description of the problem here: CSS Advisor - Safari displays red links