Re: [css-d] Vendor prefixes and validation

[Alan Gresley]

On 22/12/2010 11:20 AM, Philippe Wittenbergh wrote:


On Dec 22, 2010, at 1:07 AM, Alan Gresley wrote:


We now have all implementations supporting all the CSS3 properties
that I demo'd . I would please appreciate a check in FF4 beta if
anyone has it.


As far as the CSS 3 backgrounds and borders module is concerned,
Gecko 2.0 (Fx 4b), Presto (Opera 11), Trident (IE 9) and WebKit
(Chrome 8, Safari 5) have implemented support for all listed
properties

note: except WebKit still needs the -vendor prefix for box-shadow.
The module is expected to reach CR (or return to CR…) in a matter of
weeks.


This is not quite true. The check was for this test.



The above is not valid according to the CSS3 validator. A screenshot of 
IE9 beta is here.





Only IE9 beta that I know of supports the slash "/" in a background 
string. A simplified test which does validate as CSS3 according to the 
CSS validator [1].




Only IE9 beta, Opera 11 and WebKit (Safari 5) support background-size 
un-prefixed (the second of the test). Only IE9 beta allows the slash in 
a background string like below (the first of the test). I would please 
appreciate a check in Gecko 2 (FF 4) for the above test.


background: url(../images/gallery/byron.jpg) / auto;

[snip]


Holiday task for anyone who hasn't done so yet: _read_ the that CSS3
backgrounds and borders module:
http://www.w3.org/TR/css3-background/ (or for the latest text, the
editor's draft: http://dev.w3.org/csswg/css3-background/)


I second this.


Philippe --- Philippe Wittenbergh http://l-c-n.com/



1. 




--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] safari glitch

[Chetan Crasta]

> http://ba-doyn.com/junk/

There was some deprecated html like the center tag and align=right
etc. and some non-semantic html like .
I've made an example of how you can style the form with valid css and
semantic html.

http://roughtech.com/t/j.html

~Chetan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Footer on odd pages only

[david]

David Hucklesby wrote:

On 12/20/10 3:40 PM, Evan Panagiotopoulos wrote:

I create a string of html documents using php. Each document prints
one sheet of paper. I would like to have the documents that form the
odd sheets to have a footer where the even documents to have none.

[...]

How do you do that? Unless you are designing for an Intranet with all
paper sizes, printers, and browser print settings the same, I don't
think that can be done, can it?

A PDF might be the answer-- but not always.


Hmm, if your content was XML, you could use XSL-FO to automatically 
transform it into a formatted PDF. That might still suffer from size 
discrepancies between your page size and the visitor's page size, though.


--
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with div fixed when resizing window [ec]

[Sh]

thanks!

On Mon, Dec 20, 2010 at 11:59 PM, David Laakso
 wrote:
> Whoops! Error Correction;
>
> The link to the referenced layout is:
> 
>
> Best,
> ~d
>
> http://chelseacreekstudio.com/
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 
Sh
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vendor prefixes and validation

[Bob Rosenberg]

At 13:28 +0100 on 12/20/2010, Gabriele Romanato wrote about [css-d] 
Vendor prefixes and validation:


In response to the criticisms moved against my CSS template #1, 
here's my point of view on that matter:


http://onwebdev.blogspot.com/2010/12/css-vendor-prefixes-and-validation.html


Part of the problem in my opinion is the broken nature of the 
validation routines. They reject as invalid any Vendor Prefix and 
thus reject as invalid any page that is otherwise valid. There should 
be switches that you can use to tell the Validator that it is to 
accept any vendor prefix as valid and just care about standard 
W3C-Blessed CSS. Vendor Prefixes are ignored by browsers that do not 
understand them (ie: FF ignores -ms-* and IE ignores -mozilla-*) and 
WHEN TOLD TO so should the W3C and other Validators.

--

Bob Rosenberg
RockMUG Webmaster
webmas...@rockmug.org
www.RockMUG.org
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vendor prefixes and validation

[Philippe Wittenbergh]

On Dec 22, 2010, at 1:07 AM, Alan Gresley wrote:

> We now have all implementations supporting all the CSS3 properties that I 
> demo'd . I would please appreciate a check in FF4 beta if anyone has it.

As far as the CSS 3 backgrounds and borders module is concerned, Gecko 2.0 (Fx 
4b), Presto (Opera 11), Trident (IE 9) and WebKit (Chrome 8, Safari 5) have 
implemented support for all listed properties

note: except WebKit still needs the -vendor prefix for box-shadow.
The module is expected to reach CR (or return to CR…) in a matter of weeks.

>> The code you've written above, in my humble opinion, should be prefixed
>> -ms-*, since it doesn't follow the W3C syntax (what's that slash all
>> about?).
> 
> Yes it does. Check the latest drafts [1] which has used this syntax for over 
> a year now [2]. Note the slash "/",

The code as written is absolutely correct indeed. Opera 11 already fully 
supports the background shorthand per the aforementioned CSS3 module, nice to 
hear MS has implemented it in IE 9.

Holiday task for anyone who hasn't done so yet: _read_ the that CSS3 
backgrounds and borders module:
http://www.w3.org/TR/css3-background/
(or for the latest text, the editor's draft: 
http://dev.w3.org/csswg/css3-background/)


Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] safari glitch

[David Hucklesby]

On 12/21/10 10:12 AM, Michael Beaudoin wrote:

Hi all,

I am working on a simple form that was developed by another, that when
loaded into Safari, it will either not line up or when you click on a
drop down menu it will become misaligned. A refresh will bring it back
into alignment.

It looks and works fine in IE and Firefox.

The sample is at http://ba-doyn.com/junk/



Refresh does *not* bring it into alignment this end (Safari 5 Mac). 
Chrome does though-- but how to tell visitors to refresh?


The form is also borked in Firefox etc. if any increase in text size is 
applied. That combination of floats, pixels, text,  and absolute 
positioning is pretty toxic in any browser.


Browser default display of inline-block lets you line up those select 
boxes in a row just fine-- no added CSS required. (Not sure about older 
IE...)


Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS Coding Style

[Rowan @ Jetboy]

I used to use multiple stylesheets for ease of development (and I have to
admit, often a lot more than the four you're using), but in recent years,
after reading about the impact on page load speed, my approach has changed
radically.

If you're using @import, as you will be if you're using one stylesheet to
load in another, you're limiting the browser's ability to load stylesheets
in parallel:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

So the alternative is to have a lot of  statements in the .
However, you're still creating an unnecessary number of server requests
that'll slow down the perceived page load speed. Yes, there'll be a saving
in file size, but it'll have to be a big saving to compensate for the
additional requests. If you're using GZIP on CSS files (with the appropriate
rules for early IEs), there can be a massive size saving. For example, on
the project I've just completed, the CSS file is 24K unzipped, but 5.1K
zipped. At this size, splitting the stylesheet into multiple files would be
detrimental to overall speed. If you minify your CSS first, you can get the
size down even lower:

http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/

Take note of the comments about alphabeticising, which the above minifier
handles automatically.

Having made the case for a single CSS file, I do have sympathy for how
unwieldy this can get while developing. One way round this is to stitch
multiple files together server-side using PHP, by enabling CSS parsing of
CSS files, and pulling the component files from a PHP include directory:

css.css



You'll also need to set cache headers to ensure the browser caches the CSS.
I'm sure you could achieve a similar result in a more elegant fashion by
running a SVN post-commit hook to minify and stitch together the CSS without
having the PHP overhead.

Finally, for IE hacks, I use a cascading series of conditional comments:








All IEs get ie.css. IE7 and below gets ie7.css, IE6 and below gets ie6.css
etc. Yes, earlier versions of IE may have to parse a number of overriding
styles, but you may find that you can eliminate some of these lines once
your site is completed as some of the IE-specific sheets may be empty.

I'm very wary of off-the-shelf CSS reset stylesheets, as I've seen nasty
results on form controls that need a lot of hacking to reverse. I just tend
to use:

* {
margin: 0;
}

body, fieldset, legend, ul, ol, th, td {
padding: 0;
}

fieldset, a img {
border-width: 0;
}

and handle anything else in my main styles. However, this is very much
geared around my coding style, so your mileage my vary.




Over the past year or so I have designed and coded about 7 new web site.  I
am very comfortable with the following pattern for writing CSS:

In each web page I link a screen.css file that simply imports three other
.css files: reset.css; ie.css; and master.css.
The reset.css file is the normal file that resets all margins and padding to
zero, sets h1, h2, . . ., and p to 100%, etc.  The ie.css file has my ie
hacks.  The master.css file has the key styles that flow through the site.
Each web page has embedded styles.  This may be where I depart from the
norm.  I did one site about a year ago that included all styles in
master.css.  There were no embedded styles on any page.  This drove me
nuts!!  The style sheet was over 1000 lines of code long.  I found it very
hard to find the callouts when I needed to find them.  Also, when adding
styles for a new web page, sometimes I contradicted styles I wanted on other
pages and had a hard time diagnosing the problem.  Now, using embedded
styles on each page for those attributes unique to the page, my master.css
is typically 200 or so lines of code.  Very manageable.  No unintended
conflicts.



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Footer on odd pages only

[David Hucklesby]

On 12/20/10 3:40 PM, Evan Panagiotopoulos wrote:

I create a string of html documents using php. Each document prints
one sheet of paper. I would like to have the documents that form the
odd sheets to have a footer where the even documents to have none.

[...]

How do you do that? Unless you are designing for an Intranet with all
paper sizes, printers, and browser print settings the same, I don't
think that can be done, can it?

A PDF might be the answer-- but not always.

(Speaking as one who is having a terrible time printing off my U.K.
passport application (A4) in California (US letter size.) :(
)

Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] safari glitch

[Michael Beaudoin]

Hi all,

I am working on a simple form that was developed by another, that when  
loaded into Safari, it will either not line up or when you click on a  
drop down menu it will become misaligned. A refresh will bring it back  
into alignment.


It looks and works fine in IE and Firefox.

The sample is at http://ba-doyn.com/junk/

Thanks so much,
Michael
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How do I style links which are only a part of ul li?

[wsc1028]

 Thank you, Tim and others who answered! Problem solved, now I
know how what to do.
Appreciate your help.
--
Ellen


On Mon, 20 Dec 2010 12:47 -0500, "Tim Arnold"
 wrote:

  .longlinelist a {color: #0f0;}
  will make links inside your list green.  You could also just
  do:
  li a{color: #0f0;}
  if you really want all links inside a list to be a different
  color than other links.
  --
  -
  [3]tim.arn...@gmail.com

References


3. mailto:tim.arn...@gmail.com

-- 
http://www.fastmail.fm - Access your email from home and the web

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vendor prefixes and validation

[Philip Taylor (Webmaster, Ret'd)]

Alan Gresley wrote:


It's time now to drop the prefixes. Now if you wish to debate this, then
please feel most welcome to subscribe to the CSS WG list. Not that you
will stop anything.


How are those not involved in the current discussion intended to
interpret that last sentence, Alan ?  Are we meant to infer that
the CSS WG is an unstoppable leviathon, and that no amount of
informed input will in any way affect its decisions ?

Philip Taylor
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vendor prefixes and validation

[Alan Gresley]

On 22/12/2010 2:11 AM, Barney Carroll wrote:

CC to list since this is worthy of list discussion.


Alan,

Vendor prefixes are traditionally used to implement proprietary or
experimental features.


Yes, I acknowledge that but this transitional approach has held back web 
designers and developers for years.



The idea is that bleeding-edge tech won't be
triggered by valid CSS — it must be triggered intentionally with custom CSS.


I don't quite follow what you are saying here.


This is especially important when the developers are demoing the CSS and
aren't ready to release it — you can specify the vendor prefix if you dare,
or leave the property invocation as it stands and when the functionality has
been perfected, the browser will read it.


We now have all implementations supporting all the CSS3 properties that 
I demo'd . I would please appreciate a check in FF4 beta if anyone has it.


It's time now to drop the prefixes. Now if you wish to debate this, then 
please feel most welcome to subscribe to the CSS WG list. Not that you 
will stop anything.



The code you've written above, in my humble opinion, should be prefixed
-ms-*, since it doesn't follow the W3C syntax (what's that slash all
about?).


Yes it does. Check the latest drafts [1] which has used this syntax for 
over a year now [2]. Note the slash "/",


 =  ||  [ /  ]? || 
 ||  || {1,2}


 =  ||  [ /  ]? || 
 ||  || {1,2} || <'background-color'>


or CSS in Example XV.

body { background: red }
p { background: 40% url("chess.png") / 10em gray round fixed border-box; }

About that slash "/". I was the one that proposed it to the CSS WG list 
since it was only parsed by I think Opera 9.0 (and earlier) and IE5.5. I 
proposed it as a means to introduce a fall back background-color but 
during my time away from the WG list, it developed into it current use.



The same goes for WebKit&  Gecko's different syntax choices for
border-radius — because you are specifically invoking different
implementations, the ability to use vendor prefixes comes in really handy:
you feed this code which isn't quite as it was intended to the
implementation that you know can handle it.


I dare say that you are not aware of border-radius spec from the latest 
draft [3] which also makes use of the "/"



Regards,
Barney Carroll



1. 
2. 
3. 


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vendor prefixes and validation

[Rob Crowther]

Alan Gresley wrote:
I should add that the CSS WG current work page is out of date often. The 
current work with the latest drafts are found here.


http://dev.w3.org/csswg/

It's not the release of a new editor's draft that's significant, it's 
the spec moving to Candidate Recommendation which should be the trigger 
for browsers removing the vendor prefixes.  Though I note in the case of 
backgrounds & borders the spec did go to CR at one point and then got 
moved back.


Rob
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vendor prefixes and validation

[Alan Gresley]

On 21/12/2010 11:30 AM, Rob Crowther wrote:

On 21/12/10 00:07, Alan Gresley wrote:

Alan Gresley wrote:

Currently IE9 beta supports most of CSS3 without any vender prefixes.






All of which do no need a -ms- prefix.


That's 16 properties, all in one spec. Even if you mean the entire page
rather than just the fragment you linked to, it only mentions 8 specs.
CSS level 3 comprises over 30 separate specs:

http://www.w3.org/Style/CSS/current-work.en.html


Maybe I am loose in my wording. This whole IE is bad camp that still is 
working its' way (possibly for years to come) through the web design and 
development community is now completely unfounded since IE9 beta is is 
on par with FF3.5. Each time someone advocates that IE conditional 
comments are good and calls vender prefixes bad are invalid just 
continues this whole cycle that holds back the web.


Maybe what I should have said is that the CSS3 that IE9 beta now 
supports are mostly without a vender prefix.


I should add that the CSS WG current work page is out of date often. The 
current work with the latest drafts are found here.


http://dev.w3.org/csswg/


How do you get from 16 properties to 'most of CSS3'?


IE9 beta supports more than 16 CSS3 properties. I note at least 8 CSS 
modules.



And, I reiterate, since most of the specs they do mention are not yet at
PR, they shouldn't implement them in the finished browser without
prefixes in most cases.

Rob


I have watched the development of CSS from late 2007. If the CSS WG went 
along with the crowd of people that demanded that all implementations 
obeyed the way one should implement the spec, then this debate will 
still be going on for years to come. Would you expect that the web 
design and development communities must wait for the release of IE10 
before we can forgo with the vender prefixes. This would hold back 
further the development of CSS3 and CSS4.


Please view this demo in IE9 beta.



It has in part this CSS3.

background: url(images/image3.png) / 60% auto no-repeat, 
url(images/image2.png) / 100% auto no-repeat, url(images/image4.png) top 
right / 80% auto no-repeat, rgba(20, 20, 255, 0.1);


Using multiple images in one string (as above) would be very hard if I 
had to resort to -*-background-size and other non shorthand properties. 
The implementations that don't support such syntax would be fed a 
different background.



--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] image gallery question

[Brian M. Curran]

On 12/20/10 5:04 PM, Matthew P. Johnson wrote:
I am also looking for a better image gallery but the thing I do like about
this gallery is that all I have to do to add images is resize the larger
image and add a line of code and I am done so it works well for regular
edits without having to run the image set through a program every time we
need to update.

David Laakso wrote:
"Bah! Humbug!"



I went through looking for a good image gallery a while back. I got tons of
good feedback here, even from Scrooge. You can check out what I decided to
go with on my portfolio page: http://www.draftingservices.com/portfolio.html
It has its pluses and minuses. 



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/