If I want to utilise a CSS reset in my FW pages what is the best way to implement it?
I could add a link to my reset stylesheet in Page>HTML markup but as far as I can see the only way to ensure that it comes before any FW generated styles would be to put it in After Head. But that places it before any Meta data etc. and I am not sure that is acceptable.
I could add a link to my reset stylesheet in Page>HTML markup but as
far as I can see the only way to ensure that it comes before any FW
generated styles would be to put it in After Head. But that places
it before any Meta data etc. and I am not sure that is acceptable.
The charset meta should come before anything else (best practices,
from what I’ve learned), although whether it will break in a browser I
can’t say. Try it and see what happens.
What about importing the external “reset” css into the FW doc? Would
it get placed before or after the default css?
What about importing the external “reset” css into the FW doc? Would it get placed before or after the default css?
There is the problem - unless you use an external stylesheet incorporating the reset CSS I cant see how you can place the reset CSS after the Metadata and before the FW generated styles without using Source Code Snooper or similar.
Just bumping this into the attention zone of you CSS experts out there - you know who you are!
Hi Dave,
I’ve looked at this for a while and I just don’t see how to do it without breaking best practices. It would seem Freeway just doesn’t offer enough granular control over placing external files or ordering the styles within its own stylesheet. It’s a painfully simple thing to do manually, but I know that doesn’t solve the FW issue.
You can reset the CSS in Freeway but you’ll find that:
a) Freeway already resets the things it needs to reset to make your pages look the same from browser to browser
b) A lot of the things that get reset won’t show up in Freeway’s design view so WYSI N WYG
To make sure your reset CSS doesn’t get overridden just make sure it appears after Freeway’s style block or the link to the external CSS file.
Hope this helps,
Joe
On 4 Jun 2011, at 03:38, Todd wrote:
On Jun 3, 2011, at 7:27 PM, DeltaDave wrote:
Just bumping this into the attention zone of you CSS experts out there - you know who you are!
Hi Dave,
I’ve looked at this for a while and I just don’t see how to do it without breaking best practices. It would seem Freeway just doesn’t offer enough granular control over placing external files or ordering the styles within its own stylesheet. It’s a painfully simple thing to do manually, but I know that doesn’t solve the FW issue.
To make sure your reset CSS doesn’t get overridden just make sure it appears after Freeway’s style block or the link to the external CSS file.
Actually, on reflection you will want to make sure you add the reset CSS before Freeway’s style block, otherwise you will be resetting what you have set in Freeway.
It seems to be a bit more up-to-date than the Eric Meyer version.
Freeway already resets the things it needs to reset to make your pages look the same from browser to browser
I totally disagree with Joe’s statement about Freeway already resetting your pages to make them look the same from browser to browser. If you applied the reset to your page and compared it to what Freeway does within a page you would see how a complete reset is more beneficial. There are so many tags that Freeway does not reset or change that would affect added in markup and other types of web content that Freeway just doesn’t touch.
In the end though I end up slimming down the reset to only affect content I use on my site.
For further elaboration take a look at the Eric Meyer CSS Reset:
Yes, I do start my CSS sheet with a total Eric Meyer CSS reset. Modified in some ways of course, but on my existing work site and my store site, they both use the reset out of the gates. To simplify things, I’m sure you could run through the Eric Meyer CSS Reset code there and know, or figure out, what each property is and the corresponding value for each CSS rule there.
Off the top of my head I could think of two ways to incorporate it into Freeway.
First, would be to go through the reset CSS and add those rules into Freeway manually. It would be a copy and paste pretty much or you could try importing the stylesheet using Freeway. Probably the best method.
Secondly you could use the “Use External StyleSheet” action to attach the reset sheet. (If you’re using WebYep though make sure to remove the adjustments for “code” or that lovely SEO bar will have issues at the top of viewport window.)
Lastly, would be to wait to see if SP could come up with some way because this whole CSS reset is really on the fence in the web community. Those that oppose the reset say that you’re just supporting bloated code because who uses all those rules and browser features. You end up having to style the paragraphs, headers, blockquotes anyways so why do it twice. On the flip side people use it for consistency and don’t mind that it takes extra work to get things correct.
Kind of a pick your own poison scenario I suppose.
Plus, I read this article here and it helped:
Doesn’t always have to be the Eric Meyer one as you can see there are other alternatives.
You will need to experiment with this, because Freeway orders its
rules alphabetically by selector, and you can’t override that. So any
rule set that relies on the order of preceding rules (or existence of
those preceding rules) in order to have a precise effect will be
modified, often in very subtle ways.
Walter
On Jun 5, 2011, at 1:07 AM, Dan J wrote:
First, would be to go through the reset CSS and add those rules into
Freeway manually. It would be a copy and paste pretty much or you
could try importing the stylesheet using Freeway. Probably the best
method.
This was deliberate on my part, because often you need to override
Freeway-set rules, so this Action places its style rules after
Freeway’s, and gives you a clean shot at them.
I could modify the Action to insert a reset.css before all other
styles if you like, wouldn’t take much effort. If you send me such a
sheet, I can add it to the bundle, and maybe even add a selector to
the Action where you can choose a reset sheet to go before the rest of
the sheets you’re attaching.
Walter
On Jun 5, 2011, at 8:49 AM, DeltaDave wrote:
you could use the “Use External StyleSheet” action to attach the
reset sheet
Tried that but unfortunately the stylesheet is inserted after the FW
generated styles - really want it in there before.
I could modify the Action to insert a reset.css before all other styles if you like, wouldn’t take much effort. If you send me such a sheet, I can add it to the bundle, and maybe even add a selector to the Action where you can choose a reset sheet to go before the rest of the sheets you’re attaching.
To pick a specific reset CSS file to use I think would not be ideal as any reset css is generally modified to suit your own site - but if I had to choose one it would probably be the Meyer reset CSS Tools: Reset CSS
But an option to choose your own would be the dog’s bo****ks
I could modify the Action to insert a reset.css before all other
styles if you like, wouldn’t take much effort. If you send me such
a sheet, I can add it to the bundle, and maybe even add a selector
to the Action where you can choose a reset sheet to go before the
rest of the sheets you’re attaching.
To pick a specific reset CSS file to use I think would not be ideal
as any reset css is generally modified to suit your own site - but
if I had to choose one it would probably be the Meyer reset CSS Tools: Reset CSS
But an option to choose your own would be the dog’s bo****ks
Thats fantastic Walter but brings me back to my OP about the link to the reset stylesheet coming in After Head and before any Meta Data and was that semantically correct.
Because if it is then me adding it via Page>HTML Markup was fine and I have made you work on something unnecessarily. Though I have no doubt it will benefit others.
If you care, it will not validate as XHTML (it does as html4.1) but
may still work as expected nonetheless. I’ve read that IE may choke on
it if a doc type is not specified though.
Todd
Thats fantastic Walter but brings me back to my OP about the link to
the reset stylesheet coming in After Head and before any Meta Data
and was that semantically correct.
I’ve read that IE may choke on it if a doc type is not specified though.
My snippet was not all of what is declared in the page though and FW does declare the DOCTYPE religiously.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
etc.
etc.
But do you mean that it will not validate as HTML Strict with the link to the stylesheet coming before the Meta Data structure?