Re: [css-d] CSS must be called in the head?

[Karl DeSaulniers]

Yeah, I hear ya Philippe. No, not confusing with scripts.
I ended up having to in one of my projects. I used the visibility trick.

CSS in header..


#main {visibility:hidden;}


Then at the end of the page, I toggle the opacity.


... other styles ...

#main {visibility:visible;}




This resulted in my styles not being render blocking and no elements were 
revealed un-styled. No FOUC.
Along with moving my scripts to the footer below the css, It helped get me a 
100/100 score on google page speed. 
My score when I started was 17/100.

This way you can also have a loader outside the container be visible 
that disappears when the containers opacity is set to 1. However, in most cases 
this is unnecessary.
If your images are compressed well and there isn't a boat load of animations 
and elements on your page, 
the page will load in seconds and you hardly notice the blank screen. The 
loader is for the latter.

I admit it's not your most conventional way of loading css, but it did what it 
was intended to do for me.

http://tpsautoshippers.com is the website if you'd like to see it in action.
Built in WordPress. Pretty content heavy. Loads fairly quickly too. 

Haven't tested any screen readers. Not sure how to. 
Is there any screen reader testing sites or applications?
My thoughts are screen readers will have an easier time now that the
scripts and styles are out of the way, technically.

Screen readers just look for the html correct?

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Sep 20, 2017, at 6:08 PM, Philippe Wittenbergh  wrote:
> 
> 
>> On Sep 21, 2017, at 3:11 AM, Karl DeSaulniers  wrote:
>> 
>> Some put theirs in the footer to get a better page load score.
> 
> That seems … weird. Unless you know that **nothing** in that stylesheet will 
> be used before the page has fully loaded. Otherwise the page will start 
> re-rendering aka all kind of  FOUC. Are you confusing with scripts ?
> 
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
__
css-discuss [css-d@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 must be called in the head?

[Philippe Wittenbergh]

> On Sep 21, 2017, at 3:11 AM, Karl DeSaulniers  wrote:
> 
> Some put theirs in the footer to get a better page load score.

That seems … weird. Unless you know that **nothing** in that stylesheet will be 
used before the page has fully loaded. Otherwise the page will start 
re-rendering aka all kind of  FOUC. Are you confusing with scripts ?

> On Sep 20, 2017, at 10:22 PM, John J  wrote:
> 
> And nowhere else, correct? I'm referring to external CSS

There is nothing that requires one to put references to stylesheets in the head 
of an HTML document. However it is a good practice to put it there as it is a 
render blocking resource - meaning: it blocks any rendering until the whole 
stylesheet has been downloaded. It is a good idea, for performance reasons, to 
put it as high as possible in the head, and certainly before any script.

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






__
css-discuss [css-d@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 must be called in the head?

[Karl DeSaulniers]

Incorrect. 

Some put theirs in the footer to get a better page load score. It's up to you. 
The most commonly used method is in the header. 

Best,
Karl

Sent from losPhone

> On Sep 20, 2017, at 8:22 AM, John J  wrote:
> 
> And nowhere else, correct? I'm referring to external CSS
> 
> Thank you.
> __
> css-discuss [css-d@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-discuss [css-d@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 must be called in the head?

[Tom Livingston]

To the best of my knowledge, it is the recommended place. That's not
to say it won't work elsewhere. You would most likely see odd things
in rendering. I've seen blocks of styles in the body. I, personally,
wouldn't do it.

On Wed, Sep 20, 2017 at 9:22 AM, John J  wrote:
> And nowhere else, correct? I'm referring to external CSS
>
> Thank you.
> __
> css-discuss [css-d@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/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 Grid: Can I flow content around blocks?

[John Beales]

Thanks for pointing me to the docs, I hadn't looked there, (my bad, I know).

I wondered about the figure + p option, but it's imperfect, because
sometimes the first p will be short, (content is coming from a CMS). It's
better than nothing, but I might go and re-think my strategy for this part
of the document.

There's a codepen here: https://codepen.io/johnbeales/pen/yzNmqm

On Sat, Sep 16, 2017 at 4:55 AM Philippe Wittenbergh 
wrote:

>
> > On Sep 16, 2017, at 3:05 AM, John Beales  wrote:
> >
> > On the blog I'm coding each post is a container with a 12-column grid.
> Most
> > of the things that appear in each post, (paragraphs, blockquotes, etc),
> > span 8 columns: 3 - 10. However, I want to be able to pull them out to
> the
> > left or right - say a  that spans columns 2-4, and have the
> > following paragraphs flow around it, similar to if I had no grid, and
> > floated a  to the left or right, maybe giving it a bit of
> negative
> > margin to pull it out of the content area.
> >
> > Is this possible? I had thought that setting a float on the 
> (which
> > is a direct child of the grid container, as are the  tags and so on),
> > would do the job, but it's not. The  following the  ends up
> > below the .
>
> The float property does not apply to grid-items (your  in this
> case). see:
> https://drafts.csswg.org/css-grid/#grid-containers
>
> Maybe something like this will work (hard to say, can you provide a URL or
> a test case?)
>
> figure { grid-column: 2 / 4; }
>
> figure + p { grid-column: 5 / 10; }
>
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
>
>
>
>
>
>
>
__
css-discuss [css-d@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 Grid: Can I flow content around blocks?

[Philippe Wittenbergh]

> On Sep 16, 2017, at 3:05 AM, John Beales  wrote:
> 
> On the blog I'm coding each post is a container with a 12-column grid. Most
> of the things that appear in each post, (paragraphs, blockquotes, etc),
> span 8 columns: 3 - 10. However, I want to be able to pull them out to the
> left or right - say a  that spans columns 2-4, and have the
> following paragraphs flow around it, similar to if I had no grid, and
> floated a  to the left or right, maybe giving it a bit of negative
> margin to pull it out of the content area.
> 
> Is this possible? I had thought that setting a float on the  (which
> is a direct child of the grid container, as are the  tags and so on),
> would do the job, but it's not. The  following the  ends up
> below the .

The float property does not apply to grid-items (your  in this case). 
see:
https://drafts.csswg.org/css-grid/#grid-containers

Maybe something like this will work (hard to say, can you provide a URL or a 
test case?)

figure { grid-column: 2 / 4; }

figure + p { grid-column: 5 / 10; }

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






__
css-discuss [css-d@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 Grid Question

[GJim]

Howdy Tom,

~~~
Friday, July 21, 2017, 12:18:41 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~



> List,

> Is it possible to style the rows and columns of a css grid - the grid itself?

> I have an upcoming layout that uses what looks like a tic-tac-toe
> board - complete with the vertical and horizontal lines of said
> tic-tac-toe board - with text/icon in each grid cell.

> Not experienced with Grid yet and can't find what I'm looking for in a search.

> TIA

This may not work as a solution for you, but your 'tic-tac-toe' reminds me of
what I did on the main page here:
www.rmaba.org

Six squares, all are .png images (in order to control font).

I'll probably be adding two more squares, near future, for additional features.

Hope this helps.

G-Jim c):{-

-- 
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

__
css-discuss [css-d@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 Grid Question

[Tom Livingston]

Ow, my head.




On Fri, Jul 21, 2017 at 5:20 PM Eric A. Meyer  wrote:

> On 21 Jul 2017, at 14:18, Tom Livingston wrote:
>
> > Is it possible to style the rows and columns of a css grid - the grid
> > itself?
>
> There's no way to say something like  '@column[2] {border: 1px
> solid;}' and thus directly style the grid components.  You have to
> assign some sort of element into the grid, and style that.
>
> > I have an upcoming layout that uses what looks like a tic-tac-toe
> > board - complete with the vertical and horizontal lines of said
> > tic-tac-toe board - with text/icon in each grid cell.
>
> You could certainly style the borders of the elements filling the
> grid cells to create this effect.  Alternatively, if you're going to be
> assigning element to every grid cell but they can rearrange, you can use
> what I call the "Attack of the Filler s" approach.  It would go
> something like this:
>
> 
> (...all your content here...)
> 
> 
> 
>
> Then assign styles something like this for the  elements:
>
> b#col {grid-column: 2; grid-row: 1 / -1; border: 1px solid gray;
> border-width: 0 1px;}
> b#row {grid-column: 1 / -1; grid-row: 2; border: 1px solid gray;
> border-width: 1px 0;}
>
> That would get you the tic-tac-toe grid.
> The drawback there is you could no longer rely on the grid's
> automatic content flow to fill in the content, because the  elements
> would be occupying cells.  If you explicitly assign the various pieces
> of content to their cells, then that's not a problem.  If you want to do
> this, but still want auto-flow into cells, you'd need to have the
> content and tic-tac-tow grids in separate elements, and then position
> one on top of the other.  Note that I don't necessarily mean 'position',
> though that could work.  You could grid a container of the two grids so
> as to put one grid on the other grid.. so, yes, you can have grids in
> your grid to grid a grid over a grid.
> I swear that made sense when I typed it.
>
> --
> Eric A. Meyer - http://meyerweb.com/
> __
> css-discuss [css-d@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/

-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 Grid Question

[Eric A. Meyer]

On 21 Jul 2017, at 14:18, Tom Livingston wrote:

Is it possible to style the rows and columns of a css grid - the grid 
itself?


   There's no way to say something like  '@column[2] {border: 1px 
solid;}' and thus directly style the grid components.  You have to 
assign some sort of element into the grid, and style that.



I have an upcoming layout that uses what looks like a tic-tac-toe
board - complete with the vertical and horizontal lines of said
tic-tac-toe board - with text/icon in each grid cell.


   You could certainly style the borders of the elements filling the 
grid cells to create this effect.  Alternatively, if you're going to be 
assigning element to every grid cell but they can rearrange, you can use 
what I call the "Attack of the Filler s" approach.  It would go 
something like this:



   (...all your content here...)
   
   


Then assign styles something like this for the  elements:

b#col {grid-column: 2; grid-row: 1 / -1; border: 1px solid gray; 
border-width: 0 1px;}
b#row {grid-column: 1 / -1; grid-row: 2; border: 1px solid gray; 
border-width: 1px 0;}


That would get you the tic-tac-toe grid.
   The drawback there is you could no longer rely on the grid's 
automatic content flow to fill in the content, because the  elements 
would be occupying cells.  If you explicitly assign the various pieces 
of content to their cells, then that's not a problem.  If you want to do 
this, but still want auto-flow into cells, you'd need to have the 
content and tic-tac-tow grids in separate elements, and then position 
one on top of the other.  Note that I don't necessarily mean 'position', 
though that could work.  You could grid a container of the two grids so 
as to put one grid on the other grid.. so, yes, you can have grids in 
your grid to grid a grid over a grid.

   I swear that made sense when I typed it.

--
Eric A. Meyer - http://meyerweb.com/
__
css-discuss [css-d@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 Grid Question

[Karl DeSaulniers]

Sure

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 21, 2017, at 1:18 PM, Tom Livingston  wrote:
> 
> List,
> 
> Is it possible to style the rows and columns of a css grid - the grid itself?
> 
> I have an upcoming layout that uses what looks like a tic-tac-toe
> board - complete with the vertical and horizontal lines of said
> tic-tac-toe board - with text/icon in each grid cell.
> 
> Not experienced with Grid yet and can't find what I'm looking for in a search.
> 
> TIA
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> css-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Andre "Osku" Schmidt]

On Sat, Aug 13, 2016 at 9:05 PM, Karl DeSaulniers 
wrote:

> Ok, I see. I was thinking navigation buttons.
> Your example seemed to work, but I got this error.
>
> SyntaxError: Unexpected identifier 'clsn'
>
> Dreamweaver also didn't like the "let" calls.
>

​sorry, the javascript code there uses couple new things, and i can only
test with current firefox and chromium/chrome (on linux)​.
​
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let
​
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals


But it worked as far as I can tell.
> The title and text changes per the links on the side.
>

​the important part is that the links on the left would have black
background for active :target.​ (eg. for active :source, if there was such
selector)

​Cheers
Andre Schmidt​
__
css-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

Ok, I see. I was thinking navigation buttons.
Your example seemed to work, but I got this error.

SyntaxError: Unexpected identifier 'clsn'

Dreamweaver also didn't like the "let" calls.
But it worked as far as I can tell. 
The title and text changes per the links on the side.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com 




> On Aug 13, 2016, at 1:56 PM, Andre Osku Schmidt 
>  wrote:
> 
> On Sat, Aug 13, 2016 at 8:13 PM, Karl DeSaulniers  > wrote:
> Hi Andre,
> Couldn't let this one go.. :P
> Would this be what you are looking to accomplish?
> 
> http://designdrumm.com/example_target.html 
> 
> 
> ​my use case would be more like this:
> http://osku.de/post/css-target-source-example3.html#bar 
> 
> ​

__
css-discuss [css-d@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 pseudo-class for source of :target

[Andre "Osku" Schmidt]

On Sat, Aug 13, 2016 at 8:13 PM, Karl DeSaulniers 
wrote:

> Hi Andre,
> Couldn't let this one go.. :P
> Would this be what you are looking to accomplish?
>
> http://designdrumm.com/example_target.html


​my use case would be more like this:
http://osku.de/post/css-target-source-example3.html#bar
​
__
css-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

Hi Andre,
Couldn't let this one go.. :P
Would this be what you are looking to accomplish?

http://designdrumm.com/example_target.html

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 13, 2016, at 3:44 AM, Andre Osku Schmidt 
>  wrote:
> 
> On Fri, Aug 12, 2016 at 10:08 PM, Karl DeSaulniers 
> wrote:
> 
>> This might be worth taking a look at.
>> 
>> http://jsfiddle.net/SchizoDuckie/fzZ9d/
> 
> 
> ​
> ahh,
> 
> placing the link inside the :target,
> cool idea!​
> 
> Thanks
> Andre Schmidt
> __
> css-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Andre "Osku" Schmidt]

On Fri, Aug 12, 2016 at 10:08 PM, Karl DeSaulniers 
wrote:

> This might be worth taking a look at.
>
> http://jsfiddle.net/SchizoDuckie/fzZ9d/


​
ahh,

placing the link inside the :target,
cool idea!​

Thanks
Andre Schmidt
__
css-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

This might be worth taking a look at.

http://jsfiddle.net/SchizoDuckie/fzZ9d/

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 2:56 PM, Karl DeSaulniers  wrote:
> 
> Would this be what you're seeking?
> I think this is the closest you can come if not.
> 
> h1:target
> {
>background: green;
> }
> h1:not(:target)
> {
>background: red;
> }
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Aug 12, 2016, at 8:03 AM, Andre Osku Schmidt 
>>  wrote:
>> 
>> Sorry,
>> 
>> my first mail had an syntax error and was not clear enough, ill try again.
>> 
>> here is an example of :target
>> http://osku.de/post/css-target-source-example1.html
>> 
>> there we have a single css definition:
>> :target { background: green; }
>> 
>> so when we click a link (with eg. href="#foo") in the unordered list, you
>> can see the "active" target (with eg. id="foo") change and leave their
>> background to green. and all this with one css rule, pretty cool!
>> 
>> now, i'm trying to findout if there is a css pseudo-class that would be the
>> source of :target.
>> 
>> lets pretend the pseudo-class im looking for is called :source and i would
>> have css like this:
>> :source { background: red; }
>> 
>> here is an example what it would do ("polyfilled" with javascript but
>> apparently we cant just create our own pseudo-classes, so this example uses
>> .source instead of :source):
>> http://osku.de/post/css-target-source-example2.html
>> 
>> so when you click a link (with eg. href="#foo") in the unordered list, you
>> can see the "active" source (with eg. href="#foo") change and leave their
>> background to red.
>> 
>> I hope its more clear now, and still wonder if:
>> 
>> - Is there really no such pseudo-class?
>> - Would this be technically impossible?
>> - Has this been proposed before?
>> - Any tips for proposing one? ;P
>> 
>> Cheers
>> Andre Schmidt
>> __
>> css-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

Would this be what you're seeking?
I think this is the closest you can come if not.

h1:target
{
background: green;
}
h1:not(:target)
{
background: red;
}

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 8:03 AM, Andre Osku Schmidt 
>  wrote:
> 
> Sorry,
> 
> my first mail had an syntax error and was not clear enough, ill try again.
> 
> here is an example of :target
> http://osku.de/post/css-target-source-example1.html
> 
> there we have a single css definition:
> :target { background: green; }
> 
> so when we click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" target (with eg. id="foo") change and leave their
> background to green. and all this with one css rule, pretty cool!
> 
> now, i'm trying to findout if there is a css pseudo-class that would be the
> source of :target.
> 
> lets pretend the pseudo-class im looking for is called :source and i would
> have css like this:
> :source { background: red; }
> 
> here is an example what it would do ("polyfilled" with javascript but
> apparently we cant just create our own pseudo-classes, so this example uses
> .source instead of :source):
> http://osku.de/post/css-target-source-example2.html
> 
> so when you click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" source (with eg. href="#foo") change and leave their
> background to red.
> 
> I hope its more clear now, and still wonder if:
> 
> - Is there really no such pseudo-class?
> - Would this be technically impossible?
> - Has this been proposed before?
> - Any tips for proposing one? ;P
> 
> Cheers
> Andre Schmidt
> __
> css-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Philippe Wittenbergh]

> On Aug 12, 2016, at 10:03 PM, Andre Osku Schmidt 
>  wrote:
> 
> here is an example what it would do ("polyfilled" with javascript but
> apparently we cant just create our own pseudo-classes, so this example uses
> .source instead of :source):
> http://osku.de/post/css-target-source-example2.html

Fails in Safari 9.1 though: 'SyntaxError: Unexpected identifier 'clsn''
Works as expected in Firefox. Thanks for clarifying.

> so when you click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" source (with eg. href="#foo") change and leave their
> background to red.
> 
> I hope its more clear now, and still wonder if:
> 
> - Is there really no such pseudo-class?

No not really - it is a variant on the :visited state. but more temporary.

> - Would this be technically impossible?
> - Has this been proposed before?
I don’t think so.

> - Any tips for proposing one? ;P

The mailing list for the CSS WG is your best bet.
https://lists.w3.org/Archives/Public/www-style/


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





__
css-discuss [css-d@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 pseudo-class for source of :target

[Philippe Wittenbergh]

> On Aug 12, 2016, at 9:42 PM, Chris Rockwell  wrote:
> 
> Consider a use-case in which your page has a long list of
> anchors (imagine a sticky sidebar which scrolls with the user).  The goal
> (in my contrived scenario) would be to gray out the anchor which links to
> the targeted element.
> 
> Instead of styling each anchor in the sidebar with it's own rule e.g.
> a[href="target1"] {}
> a[href="target2"] {}
> 
> I think the question is, can you do something like this:
> a[href=:target] { color: lightgray; }

That would indeed by interesting, a bit limited perhaps. Basically styling the 
originating link – it is bit similar to the :visited pseudo-class, though. I 
don’t remember having seen proposals covering this - and I don’t see anything 
like that Selectors4 [*].

Karl replied

> On Aug 12, 2016, at 9:50 PM, Karl DeSaulniers  wrote:
> 
> Yes, looks like it..
> 
> https://developer.mozilla.org/en-US/docs/Web/CSS/:target

No that is not it at all. The :target pseudo class styles the target of the 
link, IOW, the destination. What the OP wants is styling the originating link.


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





__
css-discuss [css-d@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 pseudo-class for source of :target

[Andre "Osku" Schmidt]

Sorry,

my first mail had an syntax error and was not clear enough, ill try again.

here is an example of :target
http://osku.de/post/css-target-source-example1.html

there we have a single css definition:
:target { background: green; }

so when we click a link (with eg. href="#foo") in the unordered list, you
can see the "active" target (with eg. id="foo") change and leave their
background to green. and all this with one css rule, pretty cool!

now, i'm trying to findout if there is a css pseudo-class that would be the
source of :target.

lets pretend the pseudo-class im looking for is called :source and i would
have css like this:
:source { background: red; }

here is an example what it would do ("polyfilled" with javascript but
apparently we cant just create our own pseudo-classes, so this example uses
.source instead of :source):
http://osku.de/post/css-target-source-example2.html

so when you click a link (with eg. href="#foo") in the unordered list, you
can see the "active" source (with eg. href="#foo") change and leave their
background to red.

I hope its more clear now, and still wonder if:

- Is there really no such pseudo-class?
- Would this be technically impossible?
- Has this been proposed before?
- Any tips for proposing one? ;P

Cheers
Andre Schmidt
__
css-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

Yes, looks like it..

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 7:42 AM, Chris Rockwell  wrote:
> 
> I might muddy the waters here, but I'll try to explain how I interpreted
> the goal.  Consider a use-case in which your page has a long list of
> anchors (imagine a sticky sidebar which scrolls with the user).  The goal
> (in my contrived scenario) would be to gray out the anchor which links to
> the targeted element.
> 
> Instead of styling each anchor in the sidebar with it's own rule e.g.
> a[href="target1"] {}
> a[href="target2"] {}
> 
> I think the question is, can you do something like this:
> a[href=:target] { color: lightgray; }
> 
> Then you only need 1 rule.
> 
> My apologies to OP if I am only creating noise :)!
> 
> 
> 
> 
> On Fri, Aug 12, 2016 at 8:33 AM Tom Livingston  wrote:
> 
>> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers 
>> wrote:
>>> Hi Andre,
>>> Why would you target the element for its href if you already have an id?
>>> Not sure I am understanding that part.
>>> 
>>> For checking the href, like Tom said.
>>> 
>>> a[href*='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> or if you know #foobar will always be at the end of the url you can use
>> the $
>>> 
>>> a[href$='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> or if you wanted to color per website in the url
>>> 
>>> a[href^='http://example.com'] {
>>>color: red;
>>> }
>>> 
>>> website url and hash (for those long blog urls =)
>>> 
>>> a[href^='http://example.com'][href$='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> Then there is checking both id and href
>>> 
>>> a#foobar[href*='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> if it's a link that could possibly be more than one on a page, then I
>> would use classes not an id.
>>> 
>>> a.foobar[href*='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> HTH,
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>> 
>> 
>> If I am not mistaken, and for clarity, you would not include the '#'
>> in the value of all the above examples.
>> 
>> 
>> 
>> --
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
>> #663399
>> __
>> css-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Tom Livingston]

Right, sorry. Was thinking about it wrong.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 pseudo-class for source of :target

[Chris Rockwell]

I might muddy the waters here, but I'll try to explain how I interpreted
the goal.  Consider a use-case in which your page has a long list of
anchors (imagine a sticky sidebar which scrolls with the user).  The goal
(in my contrived scenario) would be to gray out the anchor which links to
the targeted element.

Instead of styling each anchor in the sidebar with it's own rule e.g.
a[href="target1"] {}
a[href="target2"] {}

I think the question is, can you do something like this:
a[href=:target] { color: lightgray; }

Then you only need 1 rule.

My apologies to OP if I am only creating noise :)!




On Fri, Aug 12, 2016 at 8:33 AM Tom Livingston  wrote:

> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers 
> wrote:
> > Hi Andre,
> > Why would you target the element for its href if you already have an id?
> > Not sure I am understanding that part.
> >
> > For checking the href, like Tom said.
> >
> > a[href*='#foobar'] {
> > color: red;
> > }
> >
> > or if you know #foobar will always be at the end of the url you can use
> the $
> >
> > a[href$='#foobar'] {
> > color: red;
> > }
> >
> > or if you wanted to color per website in the url
> >
> > a[href^='http://example.com'] {
> > color: red;
> > }
> >
> > website url and hash (for those long blog urls =)
> >
> > a[href^='http://example.com'][href$='#foobar'] {
> > color: red;
> > }
> >
> > Then there is checking both id and href
> >
> > a#foobar[href*='#foobar'] {
> > color: red;
> > }
> >
> > if it's a link that could possibly be more than one on a page, then I
> would use classes not an id.
> >
> > a.foobar[href*='#foobar'] {
> > color: red;
> > }
> >
> > HTH,
> >
> > Best,
> >
> > Karl DeSaulniers
>
>
> If I am not mistaken, and for clarity, you would not include the '#'
> in the value of all the above examples.
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> __
> css-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

> On Aug 12, 2016, at 7:40 AM, Karl DeSaulniers  wrote:
> 
>> On Aug 12, 2016, at 7:32 AM, Tom Livingston  wrote:
>> 
>> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  
>> wrote:
>>> Hi Andre,
>>> Why would you target the element for its href if you already have an id?
>>> Not sure I am understanding that part.
>>> 
>>> For checking the href, like Tom said.
>>> 
>>> a[href*='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> or if you know #foobar will always be at the end of the url you can use the 
>>> $
>>> 
>>> a[href$='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> or if you wanted to color per website in the url
>>> 
>>> a[href^='http://example.com'] {
>>>   color: red;
>>> }
>>> 
>>> website url and hash (for those long blog urls =)
>>> 
>>> a[href^='http://example.com'][href$='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> Then there is checking both id and href
>>> 
>>> a#foobar[href*='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> if it's a link that could possibly be more than one on a page, then I would 
>>> use classes not an id.
>>> 
>>> a.foobar[href*='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> HTH,
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>> 
>> 
>> If I am not mistaken, and for clarity, you would not include the '#'
>> in the value of all the above examples.
>> 
>> 
>> 
>> -- 
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
> 
> 
> We are checking for a hash here, so yeah I would include.
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 

But for clarity, there is no gun being held to any heads. :)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

> On Aug 12, 2016, at 7:32 AM, Tom Livingston  wrote:
> 
> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  
> wrote:
>> Hi Andre,
>> Why would you target the element for its href if you already have an id?
>> Not sure I am understanding that part.
>> 
>> For checking the href, like Tom said.
>> 
>> a[href*='#foobar'] {
>>color: red;
>> }
>> 
>> or if you know #foobar will always be at the end of the url you can use the $
>> 
>> a[href$='#foobar'] {
>>color: red;
>> }
>> 
>> or if you wanted to color per website in the url
>> 
>> a[href^='http://example.com'] {
>>color: red;
>> }
>> 
>> website url and hash (for those long blog urls =)
>> 
>> a[href^='http://example.com'][href$='#foobar'] {
>>color: red;
>> }
>> 
>> Then there is checking both id and href
>> 
>> a#foobar[href*='#foobar'] {
>>color: red;
>> }
>> 
>> if it's a link that could possibly be more than one on a page, then I would 
>> use classes not an id.
>> 
>> a.foobar[href*='#foobar'] {
>>color: red;
>> }
>> 
>> HTH,
>> 
>> Best,
>> 
>> Karl DeSaulniers
> 
> 
> If I am not mistaken, and for clarity, you would not include the '#'
> in the value of all the above examples.
> 
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 


We are checking for a hash here, so yeah I would include.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@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 pseudo-class for source of :target

[Tom Livingston]

On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  wrote:
> Hi Andre,
> Why would you target the element for its href if you already have an id?
> Not sure I am understanding that part.
>
> For checking the href, like Tom said.
>
> a[href*='#foobar'] {
> color: red;
> }
>
> or if you know #foobar will always be at the end of the url you can use the $
>
> a[href$='#foobar'] {
> color: red;
> }
>
> or if you wanted to color per website in the url
>
> a[href^='http://example.com'] {
> color: red;
> }
>
> website url and hash (for those long blog urls =)
>
> a[href^='http://example.com'][href$='#foobar'] {
> color: red;
> }
>
> Then there is checking both id and href
>
> a#foobar[href*='#foobar'] {
> color: red;
> }
>
> if it's a link that could possibly be more than one on a page, then I would 
> use classes not an id.
>
> a.foobar[href*='#foobar'] {
> color: red;
> }
>
> HTH,
>
> Best,
>
> Karl DeSaulniers


If I am not mistaken, and for clarity, you would not include the '#'
in the value of all the above examples.



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 pseudo-class for source of :target

[Karl DeSaulniers]

Hi Andre,
Why would you target the element for its href if you already have an id?
Not sure I am understanding that part.

For checking the href, like Tom said.

a[href*='#foobar'] {
color: red;
}

or if you know #foobar will always be at the end of the url you can use the $

a[href$='#foobar'] {
color: red;
}

or if you wanted to color per website in the url

a[href^='http://example.com'] {
color: red;
}

website url and hash (for those long blog urls =)

a[href^='http://example.com'][href$='#foobar'] {
color: red;
}

Then there is checking both id and href

a#foobar[href*='#foobar'] {
color: red;
}

if it's a link that could possibly be more than one on a page, then I would use 
classes not an id.

a.foobar[href*='#foobar'] {
color: red;
}

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 11, 2016, at 10:46 AM, Andre Osku Schmidt 
>  wrote:
> 
> #Hello.World,
> 
> there seems to be no CSS pseudo-class that represents the element with an
> href matching the fragment identifier of the URI of the document. kinda
> like the source of :target [0].
> 
> For example with :target we can style the element that has id="#foobar"
> when the browser URL is http://example.com/page.html#foobar, with :source
> we could style the element that has href="#foobar".
> 
> I would like to easily style the link element in my table-of-content.
> 
> So before i implement this with javascript, i thought to ask here:
> 
> - Is there really no such pseudo-class?
> - Would this be technically impossible?
> - Has this been proposed before?
> - Any tips for proposing one? ;P
> 
> Cheers
> Andre Schmidt
> 
> [0] https://developer.mozilla.org/en-US/docs/Web/CSS/:target
> __
> css-discuss [css-d@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-discuss [css-d@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 pseudo-class for source of :target

[Tom Livingston]

>>
>> - Is there really no such pseudo-class?
>> - Would this be technically impossible?
>> - Has this been proposed before?
>> - Any tips for proposing one? ;P
>>
>> Cheers
>> Andre Schmidt
>
>
> I accidentally replied off list with...
>
> a[class="table-of-contents"]{
>  color: red;
> }
>
> Google "Attribute Selectors"
>
>
>
> But more in line with the OP's actual question:
>
> a[href*="table-of-contents"]{
>  color: red;
> }
>
>
> HTH
>

As with many things, your browser support needs may vary. I believe
this will work back to IE8 or 9. caniuse.com listed other attribute
selectors but I didn't see this one specifically listed.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 pseudo-class for source of :target

[Tom Livingston]

On Thu, Aug 11, 2016 at 11:46 AM, Andre "Osku" Schmidt
 wrote:
> #Hello.World,
>
> there seems to be no CSS pseudo-class that represents the element with an
> href matching the fragment identifier of the URI of the document. kinda
> like the source of :target [0].
>
> For example with :target we can style the element that has id="#foobar"
> when the browser URL is http://example.com/page.html#foobar, with :source
> we could style the element that has href="#foobar".
>
> I would like to easily style the link element in my table-of-content.
>
> So before i implement this with javascript, i thought to ask here:
>
> - Is there really no such pseudo-class?
> - Would this be technically impossible?
> - Has this been proposed before?
> - Any tips for proposing one? ;P
>
> Cheers
> Andre Schmidt


I accidentally replied off list with...

a[class="table-of-contents"]{
 color: red;
}

Google "Attribute Selectors"



But more in line with the OP's actual question:

a[href*="table-of-contents"]{
 color: red;
}


HTH


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 Animation Scribble ?

[Crest Christopher]

There is no SVG file, it is strictly a PNG, I created manually in 
Photoshop.



Photoshop sprite tools are weak I'm going to consider making a Photoshop 
plugin for this in the future.


Philippe Wittenbergh wrote:




On Apr 5, 2016, at 04:22, Crest 
Christopher wrote:


The hover works, but the sprite doesn't animate upon hover ?

a {
height:23px
margin-top: -21px
display:block;
}

a:hover {
background-position:0 -1225px // The sprite actual width
background:url ('spriteimage.png')

If I apply the width of the sprite to the anchor, the element gets 
re-positioned, as the CSS-Tricks site mentions to do but in my case 
as I said, it gets re-positioned and I don't want that.




If I understand correctly: 1/ you have an animation defined **inside** 
the SVG file and 2/ that SVG file is loaded as a background-image. The 
you want to have that animation play when your pointer hovers over the 
image.


I don’t think that ought to work. Animations defined inside the SVG 
will only work if the SVG image is embedded directly inside the HTML.


Like this:
………

Sara Soueidan has some examples of animations on hover (scroll down):
https://sarasoueidan.com/tools/circulus/

There is lots of useful info about SVG on her site.

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





__
css-discuss [css-d@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 Animation Scribble ?

[Philippe Wittenbergh]

> On Apr 5, 2016, at 04:22, Crest Christopher  
> wrote:
> 
> The hover works, but the sprite doesn't animate upon hover ?
> 
> a {
> height:23px
> margin-top: -21px
> display:block;
> }
> 
> a:hover {
> background-position:0 -1225px // The sprite actual width
> background:url ('spriteimage.png')
> 
> If I apply the width of the sprite to the anchor, the element gets 
> re-positioned, as the CSS-Tricks site mentions to do but in my case as I 
> said, it gets re-positioned and I don't want that.


If I understand correctly: 1/ you have an animation defined **inside** the SVG 
file and 2/ that SVG file is loaded as a background-image. The you want to have 
that animation play when your pointer hovers over the image.

I don’t think that ought to work. Animations defined inside the SVG will only 
work if the SVG image is embedded directly inside the HTML.

Like this:
………

Sara Soueidan has some examples of animations on hover (scroll down):
https://sarasoueidan.com/tools/circulus/

There is lots of useful info about SVG on her site.

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





__
css-discuss [css-d@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 Animation Scribble ?

[Karl DeSaulniers]

background-size: 100% auto;

?

Hard to help without a link to see what is happening.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




On Apr 4, 2016, at 2:22 PM, Crest Christopher  
wrote:

> The hover works, but the sprite doesn't animate upon hover ?
> 
> a {
> height:23px
> margin-top: -21px
> display:block;
> }
> 
> a:hover {
> background-position:0 -1225px // The sprite actual width
> background:url ('spriteimage.png')
> 
> If I apply the width of the sprite to the anchor, the element gets 
> re-positioned, as the CSS-Tricks site mentions to do but in my case as I 
> said, it gets re-positioned and I don't want that.
> 
> Alex Mitchell wrote:
>> 
>> 
>> On Apr 1, 2016 8:04 AM, "Crest Christopher"
>> > wrote:
>> >
>> > Hi, I was hoping someone can help; I want to animate a scribble
>> effect using CSS & SVG.
>> 
>> Chris Coyier wrote a really comprehensive guide to that sort of
>> animation and how it works
>> 
>> https://css-tricks.com/svg-line-animation-works/
>> 
>> Alex Mitchell
>> __
>> > css-discuss [css-d@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-discuss [css-d@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-discuss [css-d@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 Animation Scribble ?

[Crest Christopher]

The hover works, but the sprite doesn't animate upon hover ?

a {
height:23px
margin-top: -21px
display:block;
}

a:hover {
background-position:0 -1225px // The sprite actual width
background:url ('spriteimage.png')

If I apply the width of the sprite to the anchor, the element gets 
re-positioned, as the CSS-Tricks site mentions to do but in my case as I 
said, it gets re-positioned and I don't want that.


Alex Mitchell wrote:



On Apr 1, 2016 8:04 AM, "Crest Christopher"
> wrote:
>
> Hi, I was hoping someone can help; I want to animate a scribble
effect using CSS & SVG.

Chris Coyier wrote a really comprehensive guide to that sort of
animation and how it works

https://css-tricks.com/svg-line-animation-works/

Alex Mitchell
__
> css-discuss [css-d@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-discuss [css-d@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 Animation Scribble ?

[Alex Mitchell]

On Apr 1, 2016 8:04 AM, "Crest Christopher" 
wrote:
>
> Hi, I was hoping someone can help; I want to animate a scribble effect
using CSS & SVG.

Chris Coyier wrote a really comprehensive guide to that sort of animation
and how it works

https://css-tricks.com/svg-line-animation-works/

Alex Mitchell
__
> css-discuss [css-d@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-discuss [css-d@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 only popup to stay in viewport

[Tom Livingston]

On Thu, Feb 11, 2016 at 11:24 AM, Greg Gamble  wrote:
> I have a popup that displays when you hover over an icon.  It's a
glorified tooltip, with descriptive information.  When the icon is near the
edge of the viewport it crossover into the area that is not viewable.
Anyone have some CSS only tricks to have it stay within the container div?
>
> Example page is here: http://pastebin.com/FHbv8beC
>
>
> Greg
>


.tooltip-content {
height: auto;
display: block;
position: absolute;
bottom: 100%;
left: -150px;  <<< I'm guessing this is the issue
...
}



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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-d Digest, Vol 157, Issue 1

[Colin (Sandy) Pittendrigh]

OK I'll offer my $0.02

I stopped following the site because CSS in a vacuum is not interesting, to
me.

Real world work involves a three part combination of HTML CSS and
Javascript.

Discussing one without the others is like trying to get healthy by exercise
alone, without paying attention to diet and the sleep cycle.

We live in a world of systems.  That's what I'm interested in. Whole
systems.

On Mon, Jan 4, 2016 at 2:27 PM,  wrote:

> Send css-d mailing list submissions to
> css-d@lists.css-discuss.org
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://lists.css-discuss.org/mailman/listinfo/css-d
> or, via email, send a message with subject or body 'help' to
> css-d-requ...@lists.css-discuss.org
>
> You can reach the person managing the list at
> css-d-ow...@lists.css-discuss.org
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of css-d digest..."
>
>
> Today's Topics:
>
>1. Re: [ADMIN] Hello, my friends, hello (John D)
>2. Re: [ADMIN] Hello, my friends, hello (Micky Hulse)
>3. Re: [ADMIN] Hello, my friends, hello (Tom Livingston)
>4. Re: [ADMIN] Hello, my friends, hello (Micky Hulse)
>5. Re: [ADMIN] Hello, my friends, hello (Felix Miata)
>6. Re: [ADMIN] Hello, my friends, hello (Micky Hulse)
>7. Re: Flexbox Fallback to Justify Nav Items with Equal Spacing
>   (Eric A. Meyer)
>8. Re: [ADMIN] Hello, my friends, hello (Erik Visser)
>9. Re: [ADMIN] Hello, my friends, hello (MiB)
>   10. Re: [ADMIN] Hello, my friends, hello (John Griessen)
>   11. Re: [ADMIN] Hello, my friends, hello (John Griessen)
>   12. Re: [ADMIN] Hello, my friends, hello (D'Arcy J.M. Cain)
>   13. Re: [ADMIN] Hello, my friends, hello (Davies, Elizabeth)
>   14. Re: [ADMIN] Hello, my friends, hello (Cheryl D Wise)
>   15. Re: [ADMIN] Hello, my friends, hello (Theophan Dort)
>   16. Re: [ADMIN] Hello, my friends, hello (John D)
>   17. Re: [ADMIN] Hello, my friends, hello (John Griessen)
>   18. Re: [ADMIN] Hello, my friends, hello (GJim)
>   19. Re: [ADMIN] Hello, my friends, hello (Kathy Wheeler)
>   20. Re: [ADMIN] Hello, my friends, hello (MiB)
>   21. Re: [ADMIN] Hello, my friends, hello (Del Wegener)
>   22. Re: [ADMIN] Hello, my friends, hello (D'Arcy J.M. Cain)
>
>
> --
>
> Message: 1
> Date: Wed, 30 Dec 2015 17:37:23 +
> From: John D 
> To: COM , "Eric A. Meyer" ,
> CSS-Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID: 
> Content-Type: text/plain; charset="Windows-1252"
>
>
>
>
> > On the other hand, CSS and HTML are like salt and pepper, bert and
> ernie, bread and butter. They seem to be the keys to each other?s locks, or
> perhaps together they form a whole technology, and within that perspective,
> I can see a list embracing both technologies as a focus.
> >
>
> Despite what people might think, Bootstrap is pure CSS and the code works
> out of the box for today's hunger for responsive websites.
>
> JS is optional extra as is glyphicons fonts and we don't need to discuss
> here if it is considered outside the scope of this forum.
>
>
>
>
> --
>
> Message: 2
> Date: Wed, 30 Dec 2015 10:21:45 -0800
> From: Micky Hulse 
> To: CSS-D Discuss 
> Subject: Re: [css-d] [ADMIN] Hello, my friends, hello
> Message-ID:
> 

Re: [css-d] css-d Digest, Vol 156, Issue 1

[sr nyc]

p.p.s jeez, you'd think by now I'd know how to post w/out quoting the
entire digest! My bad; I'll blame gmail and a holiday cocktail ;) 
__
css-discuss [css-d@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-d Digest, Vol 156, Issue 1

[sr nyc]

p.s. and thank you also to all the members who have been so generous with
their time and expertise over the years in contributing to the list

On Thu, Dec 24, 2015 at 8:04 AM, sr nyc  wrote:

> Mr. Meyer,
>
> The list has been an invaluable resource for so many years (possibly the
> first such list I've subbed to), and I've no doubt hundreds if not
> thousands would agree. Selfishly, though I spend less time with it than I
> used to, I would like to see it remain, but then I have no idea what time
> and resources are demanded of whomever would operate/admin. Whatever you
> decide, I'll take this opportunity to say a huge, long overdue 'thank you'
> - not only for css-discuss but for your stewardship in the css community
> since day one.
>
> Cheers!
>
> sr
>
> On Wed, Dec 23, 2015 at 8:51 PM, 
> wrote:
>
>> Send css-d mailing list submissions to
>> css-d@lists.css-discuss.org
>>
>> To subscribe or unsubscribe via the World Wide Web, visit
>> http://lists.css-discuss.org/mailman/listinfo/css-d
>> or, via email, send a message with subject or body 'help' to
>> css-d-requ...@lists.css-discuss.org
>>
>> You can reach the person managing the list at
>> css-d-ow...@lists.css-discuss.org
>>
>> When replying, please edit your Subject line so it is more specific
>> than "Re: Contents of css-d digest..."
>>
>>
>> Today's Topics:
>>
>>1. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>>2. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>>3. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>>4. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>>5. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>>6. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>>7. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>>8. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>>9. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>>   10. Re: iPhone difference 5 & 5c ? (Philip Taylor)
>>   11. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>>   12. Directories on server as Project ? (Crest Christopher)
>>   13. Re: Directories on server as Project ? (Tom Livingston)
>>   14. [ADMIN] Hello, my friends, hello (Eric A. Meyer)
>>   15. Re: [ADMIN] Hello, my friends, hello (Greg Gamble)
>>   16. Re: [ADMIN] Hello, my friends, hello (Angela French)
>>   17. Re: [ADMIN] Hello, my friends, hello (Tom Livingston)
>>   18. Re: [ADMIN] Hello, my friends, hello (Kathy Wheeler)
>>   19. list life (Leslie Albuquerque)
>>
>>
>> --
>>
>> Message: 1
>> Date: Wed, 14 Oct 2015 12:04:44 -0400
>> From: Crest Christopher 
>> To: Tom Livingston 
>> Cc: MiB ,CSS-D Discuss
>> 
>> Subject: Re: [css-d] iPhone difference 5 & 5c ?
>> Message-ID: <561e7d1c.30...@gmail.com>
>> Content-Type: text/plain; charset=UTF-8; format=flowed
>>
>> The opera mini I use on my phone displays the page fine, besides it's
>> problem rendering some pseudo-elements, other then that.
>>
>> It may be iPhone5 c is only 640px width in resolution, how can I solve
>> this if I can't emulate a webkit on an iPhone 5 and 5c & 5s, which at
>> this point besides iPod touch are my only problem devices, arghh.
>>
>> Tom Livingston wrote:
>> >
>> > Other than Opera Mini, you cannot run any other rendering engine on an
>> > iOS device other than the installed Webkit.
>> >
>> > My suggestion is to not build the page so it is dependent on pixel
>> > widths - at least not to the extent that a 1 pixel difference breaks
>> > your page. Yikes!
>> >
>> > On Wed, Oct 14, 2015 at 11:43 AM, Crest Christopher
>> >  wrote:
>> >>
>> >> The only solution I can think of is since the problem is with Safari
>> >> using
>> >> WebKit engine is if it's possible to switch between webkit and blink ?
>> >>
>> >>
>> >> MiB wrote:
>> >>>
>> >>>
>> >>> okt 14 2015 01:28 Crest Christopher:
>> >>>
>> 
>>  What if you don't have an iPhone or a Mac to begin with, there is no
>>  other options besides Chrome, or am I wrong ?
>> >>>
>> >>>
>> >>>
>> >>> Xcode has iphone emulation . I haven?t applied it recently, but I
>> think
>> >>> you can run it separately from the coding in Xcode. I did this at some
>> >>> point, but I don?t remember the set up and it should have been changed
>> >>> now..I use Bluestacks for Android.
>> >>>
>> >>>
>> >>> __
>> >>> css-discuss [css-d@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-d Digest, Vol 156, Issue 1

[sr nyc]

Mr. Meyer,

The list has been an invaluable resource for so many years (possibly the
first such list I've subbed to), and I've no doubt hundreds if not
thousands would agree. Selfishly, though I spend less time with it than I
used to, I would like to see it remain, but then I have no idea what time
and resources are demanded of whomever would operate/admin. Whatever you
decide, I'll take this opportunity to say a huge, long overdue 'thank you'
- not only for css-discuss but for your stewardship in the css community
since day one.

Cheers!

sr

On Wed, Dec 23, 2015 at 8:51 PM, 
wrote:

> Send css-d mailing list submissions to
> css-d@lists.css-discuss.org
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://lists.css-discuss.org/mailman/listinfo/css-d
> or, via email, send a message with subject or body 'help' to
> css-d-requ...@lists.css-discuss.org
>
> You can reach the person managing the list at
> css-d-ow...@lists.css-discuss.org
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of css-d digest..."
>
>
> Today's Topics:
>
>1. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>2. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>3. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>4. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>5. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>6. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>7. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>8. Re: iPhone difference 5 & 5c ? (Tom Livingston)
>9. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>   10. Re: iPhone difference 5 & 5c ? (Philip Taylor)
>   11. Re: iPhone difference 5 & 5c ? (Crest Christopher)
>   12. Directories on server as Project ? (Crest Christopher)
>   13. Re: Directories on server as Project ? (Tom Livingston)
>   14. [ADMIN] Hello, my friends, hello (Eric A. Meyer)
>   15. Re: [ADMIN] Hello, my friends, hello (Greg Gamble)
>   16. Re: [ADMIN] Hello, my friends, hello (Angela French)
>   17. Re: [ADMIN] Hello, my friends, hello (Tom Livingston)
>   18. Re: [ADMIN] Hello, my friends, hello (Kathy Wheeler)
>   19. list life (Leslie Albuquerque)
>
>
> --
>
> Message: 1
> Date: Wed, 14 Oct 2015 12:04:44 -0400
> From: Crest Christopher 
> To: Tom Livingston 
> Cc: MiB ,CSS-D Discuss
> 
> Subject: Re: [css-d] iPhone difference 5 & 5c ?
> Message-ID: <561e7d1c.30...@gmail.com>
> Content-Type: text/plain; charset=UTF-8; format=flowed
>
> The opera mini I use on my phone displays the page fine, besides it's
> problem rendering some pseudo-elements, other then that.
>
> It may be iPhone5 c is only 640px width in resolution, how can I solve
> this if I can't emulate a webkit on an iPhone 5 and 5c & 5s, which at
> this point besides iPod touch are my only problem devices, arghh.
>
> Tom Livingston wrote:
> >
> > Other than Opera Mini, you cannot run any other rendering engine on an
> > iOS device other than the installed Webkit.
> >
> > My suggestion is to not build the page so it is dependent on pixel
> > widths - at least not to the extent that a 1 pixel difference breaks
> > your page. Yikes!
> >
> > On Wed, Oct 14, 2015 at 11:43 AM, Crest Christopher
> >  wrote:
> >>
> >> The only solution I can think of is since the problem is with Safari
> >> using
> >> WebKit engine is if it's possible to switch between webkit and blink ?
> >>
> >>
> >> MiB wrote:
> >>>
> >>>
> >>> okt 14 2015 01:28 Crest Christopher:
> >>>
> 
>  What if you don't have an iPhone or a Mac to begin with, there is no
>  other options besides Chrome, or am I wrong ?
> >>>
> >>>
> >>>
> >>> Xcode has iphone emulation . I haven?t applied it recently, but I think
> >>> you can run it separately from the coding in Xcode. I did this at some
> >>> point, but I don?t remember the set up and it should have been changed
> >>> now..I use Bluestacks for Android.
> >>>
> >>>
> >>> __
> >>> css-discuss [css-d@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-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

Philip's second reply in this thread has the same markers.  I hadn't even
entered into the conversation yet.

-
From: Philip Taylor 
...
Content-type: text/plain;
charset="EUC-KR"
Content-transfer-encoding: quoted-printable
-


On 10/11/15, 5:19 PM, "css-d-boun...@lists.css-discuss.org on behalf of
MiB"  wrote:

>
>12 okt 2015 kl. 02:01 skrev Chris Williams :
>
>> Yeah, well whatever.  I'm using Outlook on the Mac, which is not set to
>> Korean, as Philip seems to believe.
>
>When Philip quoted your letter, he didn’t think anything else beyond the
>fact that your message had among it message headers the character set
>"euc-kr”. As I do selectively here:
>
>QUOTE
>Accept-Language: en-US
>Content-Language: en-US
>…
>Content-Type: text/plain; charset="euc-kr"
>Content-Transfer-Encoding: base64
>END QUOTE
>
>See that third line? That’s all copied from your actual message. I sent
>you your whole message as an attachment separately. Interestingly when
>this character set was used I got your characters displayed as you
>intended, contrasting the first message where it was simply . Apple Mail
>in OS X 10.9.5.
>__
>css-discuss [css-d@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-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Chris Williams wrote:

> Philip's second reply in this thread has the same markers.  I hadn't even
> entered into the conversation yet.

"Philip's second reply in this thread" is presumably my message of
09/10/2015 17:36, which read :

> Gates, Jeff wrote:
> 
>> Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
>> here: ¹
>> This: ¹ Not this: '
> 
> Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a
> prime.  What I now think you meant is :
> 
> Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see
> here: ’
> 
> I know of no way of accomplishing that using CSS, but server-side
> processing might be an (off-list/topic) option.
> 
> Philip Taylor

The quotation from Jeff Gates (being a quotation) contains the
characters that he sent (superscript 3, 2 & 1, in that order); the
latter part of the message (the part immediately preceded by "What I now
think you meant") contains Unicode left and right double quotation marks
and a single right quotation mark, in that order.  If your (Chris's)
e-mail client displays superscript 3, 2 and 1 for both parts of the
message, then it is either incapable of rendering even basic Unicode
glyphs correctly, or (more likely, in view of the fact that it sometimes
sends in "euc-kr" encoding) it is incorrectly configured.  If it
displays superscript 3, 2 and 1 for the earlier part and the correct
quotation marks for the latter part, then it is behaving correctly (in
this respect, at least).

Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

As I noted and quoted, YOUR email had the Korean encoding markers before I
even entered the conversation.

On 10/11/15, 11:56 PM, "Philip Taylor"  wrote:

>
>
>Chris Williams wrote:
>
>> Philip's second reply in this thread has the same markers.  I hadn't
>>even
>> entered into the conversation yet.
>
>"Philip's second reply in this thread" is presumably my message of
>09/10/2015 17:36, which read :
>
>> Gates, Jeff wrote:
>> 
>>> Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you
>>>see
>>> here: ¹
>>> This: ¹ Not this: '
>> 
>> Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a
>> prime.  What I now think you meant is :
>> 
>> Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see
>> here: ’
>> 
>> I know of no way of accomplishing that using CSS, but server-side
>> processing might be an (off-list/topic) option.
>> 
>> Philip Taylor
>
>The quotation from Jeff Gates (being a quotation) contains the
>characters that he sent (superscript 3, 2 & 1, in that order); the
>latter part of the message (the part immediately preceded by "What I now
>think you meant") contains Unicode left and right double quotation marks
>and a single right quotation mark, in that order.  If your (Chris's)
>e-mail client displays superscript 3, 2 and 1 for both parts of the
>message, then it is either incapable of rendering even basic Unicode
>glyphs correctly, or (more likely, in view of the fact that it sometimes
>sends in "euc-kr" encoding) it is incorrectly configured.  If it
>displays superscript 3, 2 and 1 for the earlier part and the correct
>quotation marks for the latter part, then it is behaving correctly (in
>this respect, at least).
>
>Philip Taylor

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Chris, could you please forward (to the list) the message headers in the
message from me which you believe was in Korean encoding, as I did with
your message ?  What you "quoted" was sent (by you) in Korean encoding
(euc-kr) so it mis-represented what I had sent which was sent in utf-8
as with all of my e-mails.

Could you also please clarify explicitly (as requested previously)
whether you saw the wrong characters only in the part from Jeff that I
was quoting, or in my original contribution which followed in the same
message ?

Philip Taylor

Chris Williams wrote:
> As I noted and quoted, YOUR email had the Korean encoding markers before I
> even entered the conversation.
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Karl DeSaulniers]

On the first message from either person.

Jeff Gates:

Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable


Philip:

Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: base64

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Oct 12, 2015, at 3:15 AM, Philip Taylor  wrote:

> Chris, could you please forward (to the list) the message headers in the
> message from me which you believe was in Korean encoding, as I did with
> your message ?  What you "quoted" was sent (by you) in Korean encoding
> (euc-kr) so it mis-represented what I had sent which was sent in utf-8
> as with all of my e-mails.
> 
> Could you also please clarify explicitly (as requested previously)
> whether you saw the wrong characters only in the part from Jeff that I
> was quoting, or in my original contribution which followed in the same
> message ?
> 
> Philip Taylor
> 
> Chris Williams wrote:
>> As I noted and quoted, YOUR email had the Korean encoding markers before I
>> even entered the conversation.
> __
> css-discuss [css-d@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-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Chris Williams wrote:

> My larger point was, tread carefully here.  Test a lot.  Unexpected
> results (as Jeff sees in his simple email to this list) are likely.

If one has to tread carefully for characters as commonplace and
straightforward as curly quotation marks, what hope has one if one wants
(as I frequently do) to use Vietnamese characters, polytonic Greek
characters, IPA characters and so on ?  I really think that, in the 21st
century, one should be able to rely on the receiving client displaying
the the more common elements of the Unicode repertoire correctly.   If I
were to want to include Cherokee, Blackfoot, Dene, Cree or Naskapi, for
example, then I would do well to ensure that my intended recipient(s)
had support for such languages.  But this should not have to be the case
for mainstream languages, let alone basic punctuation.

Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

Perhaps.  But browsers are not the only place where your text is
interpreted.  Witness the fact that in my mail program all I'm seeing for
his "preferred" characters are (as you also note) superscript characters.
This is presumably because his email is being converted to ASCII
characters (it's a non-html email) which is then being attempted to be
displayed in a font (in my case Consolas) that doesn't represent these
glyphs properly.

My larger point was, tread carefully here.  Test a lot.  Unexpected
results (as Jeff sees in his simple email to this list) are likely.

On 10/9/15, 9:48 AM, "Philip Taylor"  wrote:

>
>
>Chris Williams wrote:
>
>> 1) These characters are font dependent.  Unless you are specifically
>> calling out fonts that you use, you risk using glyphs that will not be
>> found on your target machine.
>
>My understanding (and I may be wrong) is that if a modern browser is
>called on to display a glyph G from a font F (or from a font alternative
>sequence F1, F2, F3, ...) and the glyph does not exist in F, F1, F2 or
>F3, the browser will attempt to substitute another font (which /does/
>contain the glyph) for the offending glyph, if such a font can be found
>on the system on which the browser is running.
>
>So given that U+2019   RIGHT SINGLE QUOTATION MARK (the preferred
>character to use for apostrophe ) is a standard part of Unicode, there
>is no reason not to use it where possible; only very old machines
>without Unicode support are likely to fail to display the glyph
>correctly.  Other similar and supported characters include :
>
>> U+0022   QUOTATION MARK  "   neutral (vertical), used as opening or 
>> closing
>>quotation mark; preferred characters in English for paired quotation
>>marks are U+201C and U+201D
>> U+0027   APOSTROPHE  '   neutral (vertical) glyph having mixed 
>> usage;
>>preferred character for apostrophe is U+2019; preferred characters in
>>English for paired quotation marks are U+2018 and U+2019
>> U+0060   GRAVE ACCENT`   
>> U+00B4   ACUTE ACCENT´   
>> U+2018   LEFT SINGLE QUOTATION MARK  ‘   
>> U+2019   RIGHT SINGLE QUOTATION MARK ’   this is the preferred 
>> character
>>to use for apostrophe
>> U+201C   LEFT DOUBLE QUOTATION MARK  “   
>> U+201D   RIGHT DOUBLE QUOTATION MARK ”   
>
>Philip Taylor

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

Explain then, your email of yesterday where you explain that you said

---
Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a
prime.  What I now think you meant is :

Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see
here: ’

I know of no way of accomplishing that using CSS, but server-side
processing might be an (off-list/topic) option.
---




On 10/11/15, 11:49 AM, "Philip Taylor"  wrote:

>
>
>Chris Williams wrote:
>
>> My larger point was, tread carefully here.  Test a lot.  Unexpected
>> results (as Jeff sees in his simple email to this list) are likely.
>
>If one has to tread carefully for characters as commonplace and
>straightforward as curly quotation marks, what hope has one if one wants
>(as I frequently do) to use Vietnamese characters, polytonic Greek
>characters, IPA characters and so on ?  I really think that, in the 21st
>century, one should be able to rely on the receiving client displaying
>the the more common elements of the Unicode repertoire correctly.   If I
>were to want to include Cherokee, Blackfoot, Dene, Cree or Naskapi, for
>example, then I would do well to ensure that my intended recipient(s)
>had support for such languages.  But this should not have to be the case
>for mainstream languages, let alone basic punctuation.
>
>Philip Taylor

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Tom Livingston]

On Sunday, October 11, 2015, Philip Taylor  wrote:

>
>
> Chris Williams wrote:
>
> > [Can you] explain then, your email of yesterday where you explain that
> you said
>
> Explain what, Chris ?  I sent a plain text message in UTF-8 which read :
>
> > Content-Type: text/plain; charset=UTF-8
> > Content-Transfer-Encoding: 8bit
> >
> >
> >
> > Gates, Jeff wrote:
> >
> >> Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
> >> here: ¹
> >> This: ¹ Not this: '
> >
> > Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a
> > prime.  What I now think you meant is :
> >
> > Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see
> > here: ’
> >
> > I know of no way of accomplishing that using CSS, but server-side
> > processing might be an (off-list/topic) option.
> >
> > Philip Taylor
>
> If what you received was did not contain left and right double curly
> quotation marks and a single right curly quotation mark, then your
> e-mail client is incapable of displaying even the most basic parts of
> the Unicode repertoire correctly.
>
>
>
I only saw superscripted numbers as well, and I have my doubts that ios9.x
gmail client can't display unicode...



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Tom Livingston]

On Sunday, October 11, 2015, Philip Taylor  wrote:

>
>
> Tom Livingston wrote:
>
> > I only saw superscripted numbers as well, and I have my doubts that
> > ios9.x gmail client can't display unicode...
>
> Saw only superscripted numbers in whose/which message, Tom ?
> Philip Taylor
>

 Jeff gates first reply.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Tom Livingston]

On Sunday, October 11, 2015, Philip Taylor  wrote:

>
>
> Tom Livingston wrote:
>
> > For what it's worth, I usually use entities and have yet to hear of any
> > issues.
> >
> > This:  not: '
> >
> > Though, I am no Unicode scholar.
>
> Certain entities come predefined in HTML and XHMTL, and entities can be
> declared for XML documents, but in plain text messages such as yours :
>
> > Content-Type: text/plain; charset=UTF-8
>
> they will be rendered as typed.  The set of entities that are valid for
> HTML 4.01 and XHTML include  single quotation mark, U+2019 ISOnum -->
>
> Philip Taylor
>
>
Understood. I was addressing the original issue in the op. Sorry if the
discussion has since veered elsewhere. I would just use find and replace.
Sublime Text has an option to encode special characters with entities.
Select all text and encode special characters. Done.

2cents.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Chris Williams wrote:

> [Can you] explain then, your email of yesterday where you explain that you 
> said

Explain what, Chris ?  I sent a plain text message in UTF-8 which read :

> Content-Type: text/plain; charset=UTF-8
> Content-Transfer-Encoding: 8bit
> 
> 
> 
> Gates, Jeff wrote:
> 
>> Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
>> here: ¹
>> This: ¹ Not this: '
> 
> Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a
> prime.  What I now think you meant is :
> 
> Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see
> here: ’
> 
> I know of no way of accomplishing that using CSS, but server-side
> processing might be an (off-list/topic) option.
> 
> Philip Taylor

If what you received was did not contain left and right double curly
quotation marks and a single right curly quotation mark, then your
e-mail client is incapable of displaying even the most basic parts of
the Unicode repertoire correctly.

What you sent back, which displayed here as left and right
double-quotation marks but a superscript 1 instead of a single right
quotation mark was not sent in UTF-8 but in a Korean encoding :

> Content-Type: text/plain; charset="euc-kr"
> Content-Transfer-Encoding: base64

If you abandon Unicode and use proprietary or national encodings, all
bets are off.  Jeff used neither (he used a standard ISO encoding :  ISO
8859-1) but as that encoding does not contain the characters he was
seeking to communication, they appeared garbled as one would expect :
ISO-8859-1 contains only « », " ", and ' ', and does not provide for
oriented (6- or 9-shaped) single or double quotation marks.

Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Tom Livingston wrote:


> > I only saw superscripted numbers as well, and I have my doubts that
> > ios9.x gmail client can't display unicode...
> 
> Saw only superscripted numbers in whose/which message, Tom ?
> Philip Taylor
> 
>  Jeff gates first reply.

Jeff sent in ISO-8859-1, as I mentioned in my preceding message;
therefore you (and I) saw characters from the ISO-8859-1 character set,
which does not contain the very characters that Jeff was trying to
communicate.

Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Tom Livingston wrote:

> For what it's worth, I usually use entities and have yet to hear of any
> issues. 
> 
> This:  not: '
> 
> Though, I am no Unicode scholar. 

Certain entities come predefined in HTML and XHMTL, and entities can be
declared for XML documents, but in plain text messages such as yours :

> Content-Type: text/plain; charset=UTF-8

they will be rendered as typed.  The set of entities that are valid for
HTML 4.01 and XHTML include 

Philip Taylor

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Tom Livingston wrote:

> I only saw superscripted numbers as well, and I have my doubts that
> ios9.x gmail client can't display unicode...

Saw only superscripted numbers in whose/which message, Tom ?
Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Tom Livingston]

On Sunday, October 11, 2015, Philip Taylor  wrote:

>
>
> Tom Livingston wrote:
>
>
> > > I only saw superscripted numbers as well, and I have my doubts that
> > > ios9.x gmail client can't display unicode...
> >
> > Saw only superscripted numbers in whose/which message, Tom ?
> > Philip Taylor
> >
> >  Jeff gates first reply.
>
> Jeff sent in ISO-8859-1, as I mentioned in my preceding message;
> therefore you (and I) saw characters from the ISO-8859-1 character set,
> which does not contain the very characters that Jeff was trying to
> communicate.
>
> Philip Taylor
>

For what it's worth, I usually use entities and have yet to hear of any
issues.

This:  not: '

Though, I am no Unicode scholar.




-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

This.

From:  Tom Livingston <tom...@gmail.com>
Date:  Sunday, October 11, 2015 at 12:37 PM
To:  "p.tay...@rhul.ac.uk" <p.tay...@rhul.ac.uk>
Cc:  Christopher Williams <ch...@clwill.com>, CSS-D
<css-d@lists.css-discuss.org>
Subject:  Re: [css-d] CSS solution for a "curly" apostrophe

I only saw superscripted numbers as well, and I have my doubts that ios9.x
gmail client can't display unicode...
 

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Tom Livingston]

On Sunday, October 11, 2015, Chris Williams <ch...@clwill.com> wrote:

> This.
>
>

Philip already explained this...

"Jeff sent in ISO-8859-1, as I mentioned in my preceding message;
therefore you (and I) saw characters from the ISO-8859-1 character set,
which does not contain the very characters that Jeff was trying to
communicate.

Philip Taylor"





> From:  Tom Livingston <tom...@gmail.com <javascript:;>>
> Date:  Sunday, October 11, 2015 at 12:37 PM
> To:  "p.tay...@rhul.ac.uk <javascript:;>" <p.tay...@rhul.ac.uk
> <javascript:;>>
> Cc:  Christopher Williams <ch...@clwill.com <javascript:;>>, CSS-D
> <css-d@lists.css-discuss.org <javascript:;>>
> Subject:  Re: [css-d] CSS solution for a "curly" apostrophe
>
> I only saw superscripted numbers as well, and I have my doubts that ios9.x
> gmail client can't display unicode...
>
>
> __
> css-discuss [css-d@lists.css-discuss.org <javascript:;>]
> 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/
>


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

Yeah, well whatever.  I'm using Outlook on the Mac, which is not set to
Korean, as Philip seems to believe.

From:  Tom Livingston <tom...@gmail.com>
Date:  Sunday, October 11, 2015 at 4:37 PM
To:  Christopher Williams <ch...@clwill.com>
Cc:  CSS-D <css-d@lists.css-discuss.org>
Subject:  Re: [css-d] CSS solution for a "curly" apostrophe




On Sunday, October 11, 2015, Chris Williams <ch...@clwill.com> wrote:

This.





Philip already explained this...

"Jeff sent in ISO-8859-1, as I mentioned in my preceding message;
therefore you (and I) saw characters from the ISO-8859-1 character set,
which does not contain the very characters that Jeff was trying to
communicate.





Philip Taylor"




__
css-discuss [css-d@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 solution for a "curly" apostrophe

[MiB]

12 okt 2015 kl. 02:01 skrev Chris Williams :

> Yeah, well whatever.  I'm using Outlook on the Mac, which is not set to
> Korean, as Philip seems to believe.

When Philip quoted your letter, he didn’t think anything else beyond the fact 
that your message had among it message headers the character set "euc-kr”. As I 
do selectively here:

QUOTE
Accept-Language: en-US
Content-Language: en-US
…
Content-Type: text/plain; charset="euc-kr"
Content-Transfer-Encoding: base64
END QUOTE

See that third line? That’s all copied from your actual message. I sent you 
your whole message as an attachment separately. Interestingly when this 
character set was used I got your characters displayed as you intended, 
contrasting the first message where it was simply . Apple Mail in OS X 10.9.5.
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Gates, Jeff wrote:

> Is there a way I can use css to replace all dump apostrophes with curly
> ones ? 

Google has never heard of "dump apostrophe(s)" (and neither have I), so
I regret that I can't help with this one.

Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Gates, Jeff wrote:

> Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
> here: ¹
> This: ¹ Not this: '

Hmmm, what I see are superscript 3, 2 & 1 in that order, followed by a
prime.  What I now think you meant is :

Instead of a “tick” mark for an apostrophe, I¹d like a mark like you see
here: ’

I know of no way of accomplishing that using CSS, but server-side
processing might be an (off-list/topic) option.

Philip Taylor
__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Gates, Jeff]

On 10/9/15, 12:35 PM, "css-d-boun...@lists.css-discuss.org on behalf of
Chris Williams"  wrote:

>You mean the one that shows up as an unknown character on many platforms?
>For reference either a superscript 3 or 1 in my email below...
>
>1) These characters are font dependent.  Unless you are specifically
>calling out fonts that you use, you risk using glyphs that will not be
>found on your target machine.
>
>2) I don't believe you can use CSS to do it, but you certainly could do it
>programmatically on the server (e.g. in PHP or whatever) or on the client
>(in Javascript).  For example, Wordpress typically does it in the backend.
>
>
>On 10/9/15, 9:23 AM, "css-d-boun...@lists.css-discuss.org on behalf of
>Gates, Jeff" gat...@si.edu> wrote:
>
>>On 10/9/15, 12:20 PM, "Philip Taylor"  wrote
>>
>>>
>>>
>>>Gates, Jeff wrote:
>>>
 Is there a way I can use css to replace all dump apostrophes with
curly
 ones ? 
>>>
>>>Google has never heard of "dump apostrophe(s)" (and neither have I), so
>>>I regret that I can't help with this one.
>>>
>>>Philip Taylor
>>
>>
>>Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
>>here: ¹
>>This: ¹ Not this: '


Thanks all. 
>

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Gates, Jeff]

On 10/9/15, 12:20 PM, "Philip Taylor"  wrote

>
>
>Gates, Jeff wrote:
>
>> Is there a way I can use css to replace all dump apostrophes with curly
>> ones ? 
>
>Google has never heard of "dump apostrophe(s)" (and neither have I), so
>I regret that I can't help with this one.
>
>Philip Taylor


Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
here: ¹
This: ¹ Not this: '

__
css-discuss [css-d@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 solution for a "curly" apostrophe

[Chris Williams]

You mean the one that shows up as an unknown character on many platforms?
For reference either a superscript 3 or 1 in my email below...

1) These characters are font dependent.  Unless you are specifically
calling out fonts that you use, you risk using glyphs that will not be
found on your target machine.

2) I don't believe you can use CSS to do it, but you certainly could do it
programmatically on the server (e.g. in PHP or whatever) or on the client
(in Javascript).  For example, Wordpress typically does it in the backend.


On 10/9/15, 9:23 AM, "css-d-boun...@lists.css-discuss.org on behalf of
Gates, Jeff"  wrote:

>On 10/9/15, 12:20 PM, "Philip Taylor"  wrote
>
>>
>>
>>Gates, Jeff wrote:
>>
>>> Is there a way I can use css to replace all dump apostrophes with curly
>>> ones ? 
>>
>>Google has never heard of "dump apostrophe(s)" (and neither have I), so
>>I regret that I can't help with this one.
>>
>>Philip Taylor
>
>
>Instead of a ³tick² mark for an apostrophe, I¹d like a mark like you see
>here: ¹
>This: ¹ Not this: '
>
>__
>css-discuss [css-d@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-discuss [css-d@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 solution for a "curly" apostrophe

[Philip Taylor]

Chris Williams wrote:

> 1) These characters are font dependent.  Unless you are specifically
> calling out fonts that you use, you risk using glyphs that will not be
> found on your target machine.

My understanding (and I may be wrong) is that if a modern browser is
called on to display a glyph G from a font F (or from a font alternative
sequence F1, F2, F3, ...) and the glyph does not exist in F, F1, F2 or
F3, the browser will attempt to substitute another font (which /does/
contain the glyph) for the offending glyph, if such a font can be found
on the system on which the browser is running.

So given that U+2019RIGHT SINGLE QUOTATION MARK (the preferred
character to use for apostrophe ) is a standard part of Unicode, there
is no reason not to use it where possible; only very old machines
without Unicode support are likely to fail to display the glyph
correctly.  Other similar and supported characters include :

> U+0022QUOTATION MARK  "   neutral (vertical), used as opening or 
> closing quotation mark; preferred characters in English for paired quotation 
> marks are U+201C and U+201D
> U+0027APOSTROPHE  '   neutral (vertical) glyph having mixed 
> usage; preferred character for apostrophe is U+2019; preferred characters in 
> English for paired quotation marks are U+2018 and U+2019
> U+0060GRAVE ACCENT`
> U+00B4ACUTE ACCENT´
> U+2018LEFT SINGLE QUOTATION MARK  ‘
> U+2019RIGHT SINGLE QUOTATION MARK ’   this is the preferred 
> character to use for apostrophe
> U+201CLEFT DOUBLE QUOTATION MARK  “
> U+201DRIGHT DOUBLE QUOTATION MARK ” 

Philip Taylor
__
css-discuss [css-d@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 for Android only?

[Freelance Traveller]

On Mon, 07 Sep 2015 20:07:08 +0100, Philip Taylor 
wrote:

>MiB wrote:
>
>> sep 3 2015 16:16 marie-ange.demeulemees...@bnpparibasfortis.com:
>> 
>>> The only way to detect Android is [J]avaS[c]ript.
>> 
>> It’s kinda pointless attempting to do this yourself as there are frameworks 
>> for this, also commercial. 

>I would respectfully disagree.  It is /never/ pointless to attempt to do
>something oneself that could be accomplished using a library routine /
>framework / w-h-y.  By attempting to do it oneself, one learns; by using
>a library routine / framework / w-h-y, one learns almost nothing.

I agree that trying to do it oneself is never pointless; I will disagree
that using a library routine [including frameworks or what-have-you]
unconditionally leaves one learning almost nothing. If the library
routine is an opaque black box (that is, source is unavailable; all you
get is a chunk of encrypted/compiled code and interface docs), then I
will agree that there is almost nothing that can be learned. However, if
you have access to the source code - which is likely the case for most
things written in JavaScript/ECMAScript - one can learn quite a lot by
reading/reasoning one's way through that code.

At the same time, I will acknowledge - even emphasize - that a published
library routine is /probably/ going to be a better choice in the end
than "rolling your own"; presumably, it will have been tested with a
wide variety of inputs and environments and generally debugged, and will
probably not have undocumented environmental dependencies. Rolling your
own can work, but as soon as you need to use it in a slightly different
context, bugs can turn up and be a headache to stomp on - and the
different context could be as little as an update to the user's browser
(will it work the same on different versions of the same engine, or on
different engines?), or an update to something server-side (PHP5 to
PHP6?), or even changing from running your web server on your home
connection to physically picking it up and moving it to your ISP's co-lo
facility.

-- 
Jeff Zeitlin, Editor
Freelance Traveller
The Electronic Fan-Supported
Traveller® Fanzine and Resource

edi...@freelancetraveller.com
http://www.freelancetraveller.com
http://freelancetraveller.downport.com/



®Traveller is a registered trademark of
Far Future Enterprises, 1977-2014. Use of
the trademark in this notice and in the
referenced materials is not intended to
infringe or devalue the trademark.

Freelance Traveller extends its thanks to the following
enterprises for hosting services:

CyberNET Web Hosting (http://www.cyberwebhosting.net)
The Traveller Downport (http://www.downport.com)
__
css-discuss [css-d@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 for Android only?

[Karl DeSaulniers]

And unfortunately when everyone uses a framework and does not learn how that 
framework actually works because they never took the time to learn on their 
own, you end up with sub par implementations of said framework. Just Look at 
Flash. 

Main reason it bombed is because of the programmers not learning the best way 
to used and code it. That is what I think, created, what Jobs hated about 
flash, but I'm wandering into ot land now. 

I say always start with learning it yourself. It may turn into YOU creating a 
framework. 

Best,
Karl

Sent from losPhone

> On Sep 7, 2015, at 3:48 PM, MiB  wrote:
> 
> 
>> 7 sep 2015 kl. 21:07 skrev Philip Taylor :
>> 
>> 
>> 
>> MiB wrote:
>> 
>>> sep 3 2015 16:16 marie-ange.demeulemees...@bnpparibasfortis.com:
>>> 
 The only way to detect Android is [J]avaS[c]ript.
>>> 
>>> It’s kinda pointless attempting to do this yourself as there are frameworks 
>>> for this, also commercial.
>> 
>> I would respectfully disagree.  It is /never/ pointless to attempt to do
>> something oneself that could be accomplished using a library routine /
>> framework / w-h-y.  By attempting to do it oneself, one learns; by using
>> a library routine / framework / w-h-y, one learns almost nothing.
>> 
>> Philip Taylor
> 
> Well put, Philip. 
> I’m just lazy that way and I choose where to invest my energy, which is the 
> server back end.  But if it was a paying customer that needed this i’d choose 
> a commercial alternative or a framework to save them the expense for me 
> learning this. If it was a pro bono job I’d contemplate spending time also on 
> learning something like this.
> 
> It’s always wise to leave as many options on the table as there are, until 
> you need to make the choice.
> __
> css-discuss [css-d@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-discuss [css-d@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 for Android only?

[MiB]

7 sep 2015 kl. 21:07 skrev Philip Taylor :

> 
> 
> MiB wrote:
> 
>> sep 3 2015 16:16 marie-ange.demeulemees...@bnpparibasfortis.com:
>> 
>>> The only way to detect Android is [J]avaS[c]ript.
>> 
>> It’s kinda pointless attempting to do this yourself as there are frameworks 
>> for this, also commercial. 
> 
> I would respectfully disagree.  It is /never/ pointless to attempt to do
> something oneself that could be accomplished using a library routine /
> framework / w-h-y.  By attempting to do it oneself, one learns; by using
> a library routine / framework / w-h-y, one learns almost nothing.
> 
> Philip Taylor

Well put, Philip. 
I’m just lazy that way and I choose where to invest my energy, which is the 
server back end.  But if it was a paying customer that needed this i’d choose a 
commercial alternative or a framework to save them the expense for me learning 
this. If it was a pro bono job I’d contemplate spending time also on learning 
something like this.

It’s always wise to leave as many options on the table as there are, until you 
need to make the choice.
__
css-discuss [css-d@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 for Android only?

[Philip Taylor]

MiB wrote:

> sep 3 2015 16:16 marie-ange.demeulemees...@bnpparibasfortis.com:
> 
>> The only way to detect Android is [J]avaS[c]ript.
> 
> It’s kinda pointless attempting to do this yourself as there are frameworks 
> for this, also commercial. 

I would respectfully disagree.  It is /never/ pointless to attempt to do
something oneself that could be accomplished using a library routine /
framework / w-h-y.  By attempting to do it oneself, one learns; by using
a library routine / framework / w-h-y, one learns almost nothing.

Philip Taylor
__
css-discuss [css-d@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 for Android only?

[marie-ange.demeulemees...@bnpparibasfortis.com]

Thanks to all.
The only way to detect Android is javaSript.
Media queries are not possible because they only use screen width and height 
and portview width and height.

Groeten,

Marie-Ange 

-Original Message-
From: Karl DeSaulniers [mailto:k...@designdrumm.com] 
Sent: Thursday, September 03, 2015 2:41 PM
To: DEMEULEMEESTER Marie-Ange
Subject: Re: [css-d] css for Android only?

Hi,
If all you need to do is detect an Android device. This is what I use and it 
has proven very handy.
It is javascript so I wont post to the board, but is a few lines of JS and 
doesn't hurt download speeds.


var nAgt = navigator.userAgent;

var isMobile = {
Android: function() {
return nAgt.match(/Android/i) ? true : false;
},
BlackBerry: function() {
return nAgt.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
return nAgt.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
return nAgt.match(/IEMobile/i) ? true : false;
},
Symbian: function() {
return nAgt.match(/SymbianOS/i) ? true : false;
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() 
|| isMobile.Windows() || isMobile.Symbian());
}
};

if( isMobile.any() ) {
location.href = "HTML5/index.html" ;
} else {
location.href = "FLASH/index.html" ;
}


The reason it works is because the text Android will always be in the user 
agent string for an Android device.
Wouldn't use it for redirecting to the login page, but for image swaps and 
layout adjustments, this works.


Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Sep 3, 2015, at 4:35 AM, "marie-ange.demeulemees...@bnpparibasfortis.com" 
<marie-ange.demeulemees...@bnpparibasfortis.com> wrote:

> Hello,
> Is there a way to use css that only works for Android devices?
> In fact I have to hide the print button for Android devices only.
> Thanks.
> 
> Regards,
> 
> Marie-Ange
> 
> ==
> BNP Paribas Fortis disclaimer:
> http://www.bnpparibasfortis.com/e-mail-disclaimer.html
> 
> BNP Paribas Fortis privacy policy:
> http://www.bnpparibasfortis.com/privacy-policy.html
> 
> ==
> __
> css-discuss [css-d@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-discuss [css-d@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 for Android only?

[MiB]

sep 3 2015 16:16 marie-ange.demeulemees...@bnpparibasfortis.com:

> The only way to detect Android is javaSript.

It’s kinda pointless attempting to do this yourself as there are frameworks for 
this, also commercial. 

__
css-discuss [css-d@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 for Android only?

[Philippe Wittenbergh]

> On Sep 3, 2015, at 18:35, marie-ange.demeulemees...@bnpparibasfortis.com 
> wrote:
> 
> Is there a way to use css that only works for Android devices?
> In fact I have to hide the print button for Android devices only.

Not that I know about (and many CSS hacks are probably unreliable, affecting 
both webkit and blink, desktop and mobile).
This seems one possible solution: 
https://gist.github.com/jsoverson/4963116

using Javascript to set classes. I haven’t tried it though - it came up near 
the top in a quick DDG search.
(You probably can remove the iOS code if you don’t need it)

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





__
css-discuss [css-d@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 validation error

[Philippe Wittenbergh]

 Le 1 juil. 2015 à 02:59, Mike Manley oldta...@comcast.net a écrit :
 
 All css validates except this part.
 css error = Unknown pseudo-element or pseudo-class :required
 …
 
 In the css I have this
 input:required, textarea:required{add styles}
 
 From all the information I have been able to find (which is mostly a couple 
 of years old) what I have in the css is the correct way of doing this.  So 
 either my information is wrong or I have misunderstood it.

 Le 1 juil. 2015 à 03:00, Ryan Reese sportsdude.re...@gmail.com a écrit :
 
 The validator basically doesn't know that it's valid CSS. It's not updated.
 Ignore the error :).

The :required pseudo-class was once part of CSS3-UI, but has been moved to 
CSS-Selectors 4 (somewhere during the 2014 timespan. 

Older version of CSS3-UI:
http://www.w3.org/TR/2012/WD-css3-ui-20120117/#pseudo-required-value
(Note the date at the top of the document)
Current Selectors 4 draft
https://drafts.csswg.org/selectors/#required-pseudo

As Ryan says, the validator needs some love.

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





__
css-discuss [css-d@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 validation error

[Ryan Reese]

The validator basically doesn't know that it's valid CSS. It's not updated.
Ignore the error :).

On Tue, Jun 30, 2015 at 1:59 PM, Mike Manley oldta...@comcast.net wrote:

 I need a little help understanding this error.

 All css validates except this part.
 css error = Unknown pseudo-element or pseudo-class :required


 I have this html in a table for a contact form and all html validates.
 input type=text placeholder=First Name name=first maxlength=40
 required=required /

 In the css I have this
 input:required, textarea:required{add styles}

 From all the information I have been able to find (which is mostly a
 couple of years old) what I have in the css is the correct way of doing
 this.  So either my information is wrong or I have misunderstood it.

 TIA
 Mike

 __
 css-discuss [css-d@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/




-- 
Ryan Reese
__
css-discuss [css-d@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 validation error

[Philip Taylor]

Ryan Reese wrote:

 The validator basically doesn't know that it's valid CSS. It's not 
 updated.  Ignore the error :).

It might be helpful, Ryan, if you could provide a link to the
relevant part of the W3C CSS specification(s); that way, both the
original poster and other members of the list can better inform
themselves about this and other related aspects of CSS.

Philip Taylor
__
css-discuss [css-d@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 masking

[Tom Livingston]

On Thu, Jun 4, 2015 at 10:23 PM, Philippe Wittenbergh e...@l-c-n.com wrote:

 I got something working in both Safari 8 and Opera 29:
 http://dev.l-c-n.com/_junk/mask.html

Working in latest Chrome Mac as well...



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 masking

[Crest Christopher]

I see you made mask separate, class within a class, give it another shot !


Philippe Wittenbergh mailto:e...@l-c-n.com
Thursday, June 04, 2015 10:23 PM

There are quite a few typos in your fiddle… And your generated element 
will do nothing because it is empty. At a minimum, you’d need to add 
`content:''; ` to have that ::after element do something.



I got something working in both Safari 8 and Opera 29:
http://dev.l-c-n.com/_junk/mask.html

Dunno if this is what you’re after…

According to caniuse, it is enabled by default, unperfected in 
Chromium based browsers, but at least in Opera, you need the -webkit 
prefix (and I’m not clear if the `mask-type:` is actually fully 
supported).

http://caniuse.com/#search=mask

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





Crest Christopher mailto:crestchristop...@gmail.com
Thursday, June 04, 2015 9:23 PM
A while ago I posted I couldn't get masking to work; here is my 
example https://jsfiddle.net/WildWind/bs84tegs/11/.  I had the mask 
rule within the class = two, but it wasn't working, I decided, even 
though it won't be removing parts of the black stylized circle to use 
pseudo-element:after with the mask rule, it may be wrong, it doesn't 
appear to be working anyhow ?

__
css-discuss [css-d@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 masking

[Tom Livingston]

On Fri, Jun 5, 2015 at 9:18 AM, Crest Christopher
crestchristop...@gmail.com wrote:
 I see you made mask separate, class within a class, give it another shot !


Are you saying *you* will give it another shot, or are we supposed to
be looking at something new you did?



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 masking

[Tom Livingston]

.two:after rule has typo.



On Thursday, June 4, 2015, Crest Christopher crestchristop...@gmail.com
wrote:

 A while ago I posted I couldn't get masking to work; here is my example 
 https://jsfiddle.net/WildWind/bs84tegs/11/.  I had the mask rule within
 the class = two, but it wasn't working, I decided, even though it won't be
 removing parts of the black stylized circle to use pseudo-element:after
 with the mask rule, it may be wrong, it doesn't appear to be working anyhow
 ?
 __
 css-discuss [css-d@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/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 masking

[Philippe Wittenbergh]

 Le 5 juin 2015 à 10:23, Crest Christopher crestchristop...@gmail.com a 
 écrit :
 
 A while ago I posted I couldn't get masking to work; here is my example 
 https://jsfiddle.net/WildWind/bs84tegs/11/.  I had the mask rule within the 
 class = two, but it wasn't working, I decided, even though it won't be 
 removing parts of the black stylized circle to use pseudo-element:after with 
 the mask rule, it may be wrong, it doesn't appear to be working anyhow ?

There are quite a few typos in your fiddle… And your generated element will do 
nothing because it is empty. At a minimum, you’d need to add `content:''; ` to 
have that ::after element do something.


I got something working in both Safari 8 and Opera 29:
http://dev.l-c-n.com/_junk/mask.html

Dunno if this is what you’re after…

According to caniuse, it is enabled by default, unperfected in Chromium based 
browsers, but at least in Opera, you need the -webkit prefix (and I’m not clear 
if the `mask-type:` is actually fully supported).
http://caniuse.com/#search=mask

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





__
css-discuss [css-d@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 Grids (Tom Livingston)

[Andrew Croce]

 Message: 24
 Date: Thu, 12 Mar 2015 15:16:23 -0400
 From: Tom Livingston tom...@gmail.com
 To: CSS Discussion Group css-d@lists.css-discuss.org
 Subject: [css-d] CSS Grids
 Message-ID:
 
 calxy60ywwugfudu5uu2zxuus+3ilvkroltfzu6s2rbfozh3...@mail.gmail.com
 Content-Type: text/plain; charset=UTF-8

 List,

 I have not used a grid system in the past but am looking into them. As
 I was looking at a DIY grid method I had a question pop into my
 head...

 Is it assumed (uh oh) that you would establish your columns with divs,
 for example, and insert elements like aside into those columns or
 would the aside just be given the appropriate classes to make it
 itself one of the column in the grid - thus eliminating extra markup?
 Doesn't matter? Pros and cons?


 --

 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


 #663399


 --

 __
 css-discuss [css-d@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/

 End of css-d Digest, Vol 148, Issue 1
 *



Tom,

There is some debate about this, at least amongst some of my peers. I am of
the opinion that we should separate the HTML for grids (structure) and
their contents (semantics). So create divs for your grid, applying whatever
classes needed to give them the desired layout. Then place your articles,
sections, asides, etc. within those grid elements.

I think of it like book shelves. The grid is the shelf, the content
elements are the books on the shelf. Since HTML is responsible for both
structure and semantics, our shelves and books are, so to speak, built from
the same material. In order to segregate those roles, it makes sense to me
to purposefully keep them separated, and agnostic to one another. This not
only makes for clean, modular, reusable HTML, it also assists you in
keeping your CSS and javascript modular and reusable.

Of course this all depends on what you are building, and how much
modularity you really need. In some cases, it may be completely possible to
merge your structural HTML with your semantic HTML. I have found, in the
way I develop, that it is most useful to build modular, semantic code
blocks with whatever server-side templating system you might be using (PHP,
Rails, Angular, etc), and inject them within a grid structure that is
agnostic toward the content it contains.

The common argument against this (that I get, anyway) is that it means more
divs, and thats bad. I think this is a naive oversimplification. Yes, less
HTML means smaller files and quicker http requests, but you have to balance
those potential savings with the benefits of building modular, reusable
code. Removing a few HTML elements here and there is not going to give you
significant savings. There are other, more effective ways of reducing and
speeding up http requests (file concatenation, minification, using a CDN,
etc) that could be explored.

So, my opinion is that, whether or not you build one yourself, or use a
prebuilt system (I frequently use Foundation and Bourbon Neat), you should
use a dedicated grid system.

/rant

Hope this is helpful.

-- 
Andrew Croce
andrew.cr...@gmail.com
andrewcroce.com
732.995.0590
__
css-discuss [css-d@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 Grids

[Tom Livingston]

On Thu, Mar 12, 2015 at 7:37 PM, Chris Williams ch...@clwill.com wrote:
 If you buy into a grid the idea is you go all the way.  Everything lives
 in the grid.  That way you get all the responsiveness (and other) benefits
 of the grid structure.


And when nesting columns, the same number of columns is inside each
column, just compressed? For example, in a 15 col grid with a 1.6%
margin gutter, inside a container spanning 5 columns, I want to have 2
columns. those internal 2 columns would follow the same rules - 15col
grid with a 1.6% margin - but within the smaller width of their
parent. The 1.6% gutter would be narrower than the gutter between
their parent and it's sibling(s), correct? Again, this is a home-grown
grid...

Thanks for your help.



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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 Grids

[Chris Williams]

If you buy into a grid the idea is you go all the way.  Everything lives
in the grid.  That way you get all the responsiveness (and other) benefits
of the grid structure.

On 3/12/15, 12:16 PM, Tom Livingston tom...@gmail.com wrote:

I have not used a grid system in the past but am looking into them. As
I was looking at a DIY grid method I had a question pop into my
head...

Is it assumed (uh oh) that you would establish your columns with divs,
for example, and insert elements like aside into those columns or
would the aside just be given the appropriate classes to make it
itself one of the column in the grid - thus eliminating extra markup?
Doesn't matter? Pros and cons?

__
css-discuss [css-d@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 Validation Error ?

[Philip Taylor]

URL ?

Crest Christopher wrote:


Hi, I need help with a CSS error

__
css-discuss [css-d@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 Particle Transition (Example of Effect)

[Tom Livingston]

Please try the webdesign-l list. That example is done with script. This
list is for CSS.

http://www.webdesign-l.com/



On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher 
crestchristop...@gmail.com wrote:

 I want to do an effect similar to this
 http://andrew-hoyer.com/experiments/rain/, except the div breaks up
 into particles and transitions to another div.  I hope I'm understood ?

 Christopher


 __
 css-discuss [css-d@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-discuss [css-d@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 Particle Transition (Example of Effect)

[Tom Livingston]

Neat though ;-)


 On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher 
 crestchristop...@gmail.com wrote:

 I want to do an effect similar to this
 http://andrew-hoyer.com/experiments/rain/, except the div breaks up
 into particles and transitions to another div.  I hope I'm understood ?

 Christopher


 __
 css-discuss [css-d@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-discuss [css-d@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 Particle Transition (Example of Effect)

[Crest Christopher]

It is neat :-)

I'll move the question over to another list :)

Christopher


Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 5:09 PM
Tom Livingston mailto:tom...@gmail.com
Thursday, November 20, 2014 5:08 PM
Please try the webdesign-l list. That example is done with script. 
This list is for CSS.


http://www.webdesign-l.com/



Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 20, 2014 4:51 PM
I want to do an effect similar to this 
http://andrew-hoyer.com/experiments/rain/, except the div breaks 
up into particles and transitions to another div.  I hope I'm 
understood ?


Christopher



__
css-discuss [css-d@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 Sprite Sheets

[Crest Christopher]

I will need alphas for the drop shadow which will have some opacity !

Christopher


Karl mailto:k...@teknofile.co.nz
Monday, November 17, 2014 12:32 AM
If you don't plan to use any of the individual frames elsewhere, why 
not just a good old .gif?


You can embed your timings, it's a single file that optimises well... 
so unless you really need alphas, that would be the most efficient way 
to go, IMHO.






---
Karl

__
css-discuss [css-d@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 Shapes

[Tom Livingston]

On Thu, Sep 4, 2014 at 8:32 AM, Tom Livingston tom...@gmail.com wrote:

 Good morning fellow listers,

 CSS Shapes.

 No doubt this will be something I'm asked to do in a page layout soon. I
 was just watching this demo of a new Chrome extension:

 http://razvancaliman.com/writing/css-shapes-editor-chrome/

 A very handy thing indeed, but... my first thought when seeing the coffee
 cup layout on that page is how do you provide a fallback for that?

 Anyone?

 --


I'll add that it seems like a significant layout change or at least swap
images for ones that allow text to run over them and still allow for
legibility.
I also see modernizr being used as well. Anything else?


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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 Shapes

[Philippe Wittenbergh]

Le 4 sept. 2014 à 21:32, Tom Livingston tom...@gmail.com a écrit :

 No doubt this will be something I'm asked to do in a page layout soon. I
 was just watching this demo of a new Chrome extension:
 
 http://razvancaliman.com/writing/css-shapes-editor-chrome/
 
 A very handy thing indeed, but... my first thought when seeing the coffee
 cup layout on that page is how do you provide a fallback for that?

Perhaps this:
http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/

Also this gallery by the folks who implemented it in WebKit/Bink/Firefox:
http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/

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





__
css-discuss [css-d@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 Shapes

[Tom Livingston]

On Thu, Sep 4, 2014 at 8:58 AM, Philippe Wittenbergh e...@l-c-n.com wrote:


 Le 4 sept. 2014 à 21:32, Tom Livingston tom...@gmail.com a écrit :

  No doubt this will be something I'm asked to do in a page layout soon. I
  was just watching this demo of a new Chrome extension:
 
  http://razvancaliman.com/writing/css-shapes-editor-chrome/
 
  A very handy thing indeed, but... my first thought when seeing the coffee
  cup layout on that page is how do you provide a fallback for that?

 Perhaps this:
 http://blogs.adobe.com/webplatform/2014/05/12/css-shapes-polyfill/

 Also this gallery by the folks who implemented it in WebKit/Bink/Firefox:
 http://blogs.adobe.com/webplatform/2014/05/13/good-looking-shapes-gallery/

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



Thanks Philippe.

I was hoping it wouldn't be another polyfill. I use picturefill.js (and
subsequently matchmedia.js), as I feel it's use is ultimately for the
greater good, but I'm not a fan of polyfills. If I can avoid adding any
weight, then all the better. I don't use modernizr in every project either
- though it's very handy - but shapes seem like a tough thing to do a
fallback for without it. A fallback for shapes looks like a bit of work, as
opposed to the fallback for rem units, for example.

Seems like using modernizr to help you swap images with something that
allows legible text to run over it would be simplest. Next would be layout
changes, moving the images to another place on the page so the text doesn't
crash into it. Obviously it depends on each situation...


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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 drop-down menu issues

[David Laakso]

On Sat, Aug 16, 2014 at 8:11 PM, John j...@coffeeonmars.com wrote:

 At this link,
 http://www.coffeeonmars.com/screenshots/menu-prob/product.php I am having
 issues with the header nav in that I feel I’ve done a lot of kludges to get
 it to behave correctly and not explode the page..

 ...such as giving a white 1px border to the nav (else everything below it
 disappears!)

 I know that some floats are necessary to make the child menu items behave
 correctly, but I’ve had to float the menu itself or else the sub nav at the
 left (also floated left) shoots over to the right.

 My question: can anyone suggest how I might better construct this header
 nav? it basically looks the way it needs to; would prefer fewer kludges to
 get it that way. Fewer kludges tells me fewer things to bite me down the
 road.

 Thank you!

 John



John,

Compare your page in FF, Chrome, and Opera. First place to start is to
validate the markup. .

Best,
David Laakso

-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@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 drop-down menu issues

[John]

 Compare your page in FF, Chrome, and Opera. First place to start is to
 validate the markup. 

You’re right..thank you..I need to get into the habit of doing that as with 
using Firebug to help find issues..
I keep thinking of validating as what you do when you’re done yet “getting 
done” involves valid code!

;-)

John
__
css-discuss [css-d@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 drop-down menu issues

[Karl DeSaulniers]

Hi John,
Try replacing these declarations. I think this is what your wanting.

/* new header nav */
#main_nav{
/*  border:1px solid red; */
/* border:1px solid rgb(255,255,255); */
/* float:left; */
/* width:100%; */
}

#main_nav ul{
list-style-type:none;
/* position:relative; */
margin:.5em 0 0 0;
padding:0 0 0 1.25em;
}

#middle{
/* border:1px solid green; */
margin:0;
/* padding:2em 0 0 0; */
/*overflow: :hidden;*/
}

#footer_nav ul li ul{
margin:1em 0 0 0;
/* position:absolute; */
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.35s, opacity 0.5s linear;
}

HTH,
Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Aug 16, 2014, at 7:11 PM, John j...@coffeeonmars.com wrote:

 At this link, http://www.coffeeonmars.com/screenshots/menu-prob/product.php I 
 am having issues with the header nav in that I feel I’ve done a lot of 
 kludges to get it to behave correctly and not explode the page..
 
 ...such as giving a white 1px border to the nav (else everything below it 
 disappears!)
 
 I know that some floats are necessary to make the child menu items behave 
 correctly, but I’ve had to float the menu itself or else the sub nav at the 
 left (also floated left) shoots over to the right.
 
 My question: can anyone suggest how I might better construct this header nav? 
 it basically looks the way it needs to; would prefer fewer kludges to get it 
 that way. Fewer kludges tells me fewer things to bite me down the road.
 
 Thank you!
 
 John
 __
 css-discuss [css-d@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-discuss [css-d@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 code - is this right?

[MiB]

aug 14 2014 23:19 John D xfs...@hotmail.com:

 Not sure I understand your post but span can be given a class and the code is 
 attributing to that class.  Is this what your view is about Joomla?

If you have a span element, that is a type of element already in the HTML 
language, then there’s no need to specify that one more time. Class names 
should describe the actual role of the element you’re targeting.

[class*=”whatever-best-describes-role].pull-right,
.row-fluid [class*=span].pull-right {
float: right;
}  

Using reasonably semantical HTML is as much design as is using well-expressed 
stylesheets. If your HTML is suffering so will your stylesheets.

__
css-discuss [css-d@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 code - is this right?

[Frank Taylor]

Yes, that’s correct. It’s the attribute selector. Whatever goes into the 
brackets is an attribute, and that can be any attribute on the HTML selector. 

Shameless self-plug: there’s some crazy stuff you can do with the attribute 
selector: 
http://blog.frankmtaylor.com/2012/04/27/css-sorcery-performing-magic-with-the-attribute-selector/
On Aug 14, 2014, at 0:49, John D xfs...@hotmail.com wrote:

 Just noticed that a joomla site has the following code:
 
 [class*=span].pull-right,
 .row-fluid [class*=span].pull-right {
   float: right;
 }
 
 Is this correct especially th items in square brackets?
 
 I thought the easiest way is to write something like this:
 
 span.pull-right,
 .row-fluid  {
   float: right;
 }
 Why are they using square brackets?
 
 __
 css-discuss [css-d@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-discuss [css-d@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 code - is this right?

[John D]

Thanks to everybody for sharing their knowledge about this and for 
enlightening me!!..  I have learned something new today and I will never 
forget this ever again.  There is a lot reading to be done.





-Original Message- 
From: John D

Sent: Wednesday, August 13, 2014 11:49 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] CSS code - is this right?

Just noticed that a joomla site has the following code:

[class*=span].pull-right,
.row-fluid [class*=span].pull-right {
float: right;
}

Is this correct especially th items in square brackets?

I thought the easiest way is to write something like this:

span.pull-right,
.row-fluid  {
float: right;
}
Why are they using square brackets?

-Original Message ends-  


__
css-discuss [css-d@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 code - is this right?

[Tom Livingston]

Nice article Frank.

Just so I'm tracking this right - as I've not used this very much -
given this example:

[class*=span]

This means select elements who's class contains the word 'span'. Correct?



On Thu, Aug 14, 2014 at 9:39 AM, Frank Taylor pace...@madebypaceaux.com wrote:
 Yes, that’s correct. It’s the attribute selector. Whatever goes into the 
 brackets is an attribute, and that can be any attribute on the HTML selector.

 Shameless self-plug: there’s some crazy stuff you can do with the attribute 
 selector: 
 http://blog.frankmtaylor.com/2012/04/27/css-sorcery-performing-magic-with-the-attribute-selector/
 On Aug 14, 2014, at 0:49, John D xfs...@hotmail.com wrote:

 Just noticed that a joomla site has the following code:

 [class*=span].pull-right,
 .row-fluid [class*=span].pull-right {
   float: right;
 }

 Is this correct especially th items in square brackets?

 I thought the easiest way is to write something like this:

 span.pull-right,
 .row-fluid  {
   float: right;
 }
 Why are they using square brackets?

 __
 css-discuss [css-d@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-discuss [css-d@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/



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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 code - is this right?

[MiB]

14 aug 2014 kl. 18:21 skrev Tom Livingston tom...@gmail.com:

 [class*=span”]

I guess those semantics (using elements as class names) sums up my view of 
Joomla very well. 

__
css-discuss [css-d@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 code - is this right?

[Frank Taylor]

Yes, you are correct. 

Though, for practical purposes, I wouldn’t generally recommend creating a class 
name called span. 

On Aug 14, 2014, at 18:21, Tom Livingston tom...@gmail.com wrote:

 Nice article Frank.
 
 Just so I'm tracking this right - as I've not used this very much -
 given this example:
 
 [class*=span]
 
 This means select elements who's class contains the word 'span'. Correct?
 
 
 
 On Thu, Aug 14, 2014 at 9:39 AM, Frank Taylor pace...@madebypaceaux.com 
 wrote:
 Yes, that’s correct. It’s the attribute selector. Whatever goes into the 
 brackets is an attribute, and that can be any attribute on the HTML selector.
 
 Shameless self-plug: there’s some crazy stuff you can do with the attribute 
 selector: 
 http://blog.frankmtaylor.com/2012/04/27/css-sorcery-performing-magic-with-the-attribute-selector/
 On Aug 14, 2014, at 0:49, John D xfs...@hotmail.com wrote:
 
 Just noticed that a joomla site has the following code:
 
 [class*=span].pull-right,
 .row-fluid [class*=span].pull-right {
  float: right;
 }
 
 Is this correct especially th items in square brackets?
 
 I thought the easiest way is to write something like this:
 
 span.pull-right,
 .row-fluid  {
  float: right;
 }
 Why are they using square brackets?
 
 __
 css-discuss [css-d@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-discuss [css-d@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/
 
 
 
 -- 
 
 Tom Livingston | Senior Front-End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com

__
css-discuss [css-d@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/