The SPF Pure HTML & CSS Competition

When we include fonts using @font-face, are we able to include a SVG version of the font to ensure that various browsers will support our font choice? We’ll already be including extra files by using the @font-face property to include fonts hosted on our server. Is the SVG format font file allowed?

Yes :slight_smile:

Hm, now I’m in doubt myself. Let me get to back you on this okay?

Yes @font-face is permitted, but please read the comment with the * in the second post :slight_smile:

If you knew how to code right, you wouldn’t have to use a seperate stylesheet. :stuck_out_tongue: (In all seriousness). lol

Your dog does not fear.

He seeks only clarity.

Okay, it is allowed to use multiple stylesheets, but the judges will only judge the default one. The others are to show off to the world what you can do :slight_smile:

Sitepoint - you’re supposed to be a reputable source of information on all that is web-related, and a proponent of a modern web. Why on earth, then, are you holding a contest where:

a) Entrants are encouraged to make websites that look the same in IE6 as current browsers, thus preventing them from using all the great CSS3 effects available to us.

b) Entrants can’t use javascript, meaning they can’t use semantic markup that comes with HTML5 as it can’t be styled in IE6.

It’s not real-world, it doesn’t promote the right values, and it serves no purpose. Except to make it look like you don’t think these things through very well.

Why not host a competition where entrants can make use of all the great technology available to us and make something far more interesting? That’s how the web works these days.

If you read the rules, it doesn’t say the sites have to look the same in IE6, just that the site has to degrade gracefully when viewed using IE6, which - like it or not - is still a fairly significant browser in the stats, even now.

It says “entry should look the same on IE 6 as on “modern” browsers, OR still maintain reasonable usability and attractiveness on IE 6.”

Why even include that first part? In the words of Andy Clarke, get hardboiled and forget about trying to make everything look the same in incapable browsers.

If I could suggest allowing the use of a js shiv for semantic markup?

Yes, looking the same would be quite impossible if you use CSS3, but it is possible if you use CSS2.1 and anyway, it also says

OR still maintain reasonable usability and attractiveness on IE 6.

That is, if you have rounded borders in modern browsers, but square borders in IE than that’s perfectly fine. Or, if you hack the crap out of IE6 using IE6 only CSS that’s also fine. As long as the website looks okay in IE6, even if it’s not exactly the same as in modern browsers, that’s fine.

Wait, what? Please go look up the meaning of “semantic markup”.
And HTML5 can be styled in IE6. Hint: Erik Meyer just recently released version 2 of something that shows how you can style HTML5 in IE6.

We think these things out quite a lot actually, and just that you don’t make your websites work in IE6 doesn’t mean others don’t either.
I stand by my example above that this website is to promote a web business and their website should be viewable by big companies (potential clients!) who still use IE6.

Because we chose to run a competition based on minimal HTML and CSS this time to see how much people can achieve using only that. Who knows, maybe in the future there will be a competition that will include everything.

Ok, cool.

What do you mean look up the meaning of it? I’m fully aware, I’m a front-end professional with over 6 years experience. What’s your point?! I presume you’re referring to Reset 2, which has nothing to do with the fact that IE6 doesn’t recognise new HTML5 elements and therefore needs a shiv to createElement before we can style them.

I never said I don’t make websites that work in IE6, I said that I don’t need them to look the same and as web developers we should be looking forward (with a view to graceful degradation for less capable browsers) and not backwards.

Well, this is embarrassing. Me accusing you of something while it turns out it’s me who’s not up to scratch :blush:
Okay, HTML5 Shiv is allowed, but that’s the absolute only javascript that is allowed, and it has to go in a conditional comment for IE only. I’ll add this to the rules on the first page. <– I was called out on this, and after a debate it was decided that HTML5Shiv is not allowed, but the judges will take into account that HTML5 and IE don’t play nice.
Please accept my apologies.

Okay, but I also said they don’t have to look the same, so we’re on the same page on that then aren’t we?

OK I’m in, but I’m not happy about the use of tables in the markup if I’m honest - semantically it’s fine, but I guess I just wouldn’t present packages information in a table!

Also, I’m not too keen on now allowing HTML5 Shiv to be used - it’s no different in my mind than using other JavaScript workarounds to enable/fix IE’s deficiencies.

My interpretation of this competition is showing off your skills on working with a very tight brief with a very restricted skill set, degrading gracefully where necessary. To me, that’s the mark of true skill in this competition instead of packing your markup with kludges and fudges just because you want to use something that won’t work for almost half the web’s user base.

There’s a time and place for these techniques, this competition isn’t one of them.

Still, whatever rules are finalised and set are the rules you play by. Should be a bit of fun.

Oh, and would I be marked down in correcting the copy text? Facebook should be spelled with a lowercase b

[FONT=“Georgia”]hahaha

Just leave it be.

[/FONT]

But I can’t!! The more I study the copy text to build a structure, the more I see it! And I’m sure there’s an erroneous comma in the “why work” section too!

Lol, it’s all good - I’ll leave it all alone :x

No images or any other external files, except font-files called using CSS 3 and hotlinked from the contestant’s own server *.

Note that Firefox and IE9 require CORS for cross-origin font loading to work. You can do this by setting HTTP header

Access-Control-Allow-Origin: *

for the font files.

I’m going to assume that CSS gradients are allowed, even though they’re technically considered to be “images”.

As far as I can tell from the rules, you’re allowed to use whatever markup you deem appropriate and you’re also allowed to shuffle around the content as you wish so long as it’s all there and means the same thing. So I guess you should be allowed to linearize the table and use any markup you wish for the content. (However, don’t blame me if the Contest Regulators don’t confirm my reading and later don’t accept your submission!)

The copy text file specifically marks the packages bit as a table, so I guess there’s no changing it.

It’s only a minor thing anyway, I’m trying not to take this too seriously :lol: