Re: [css-d] styles for hover effects and touch

[Sam Brown]

Saturday, January 9, 2016, 10:45:22 PM, Tom wrote:

TL> My point wasn't to mimic hover on mobile. I was asking how to set up hover
TL> for desktop but avoid having them fire on some mobile devices needlessly.
TL> Putting hover styles a a wide desktop breakpoint isn't foolproof but seems
TL> the least convoluted. Any other ideas?

Are you perhaps seeing the :active state that happens on click/tap? You could 
set the :active state on the mobile breakpoints to the same or similar to the 
:link and :visited states.

TL> On Saturday, January 9, 2016, Karl DeSaulniers  wrote:

>> You don't.

>> You can but that is a little silly IMO.
>> Hover is a mouse event meant for interaction with a mouse.
>> Until the screen can detect your finger hovering over it, there is no need
>> to set hover for mobile.
>> I know this statement may come with a backlash from some evangelicals,
>> however think about it.
>> Do you put wings on a car just because you can? Just for looks?

>> Design for your device. Leave the mouse events for the mouse and the click
>> events for mobile to turn into tap events.
>> If you really must have hover events on mobile, then javascript/jQuery is
>> the way to go.
>> it includes setting a timeout to see if their finger has stayed on the
>> screen for so long past a click.

>> Best,

>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com



>> On Jan 8, 2016, at 9:49 AM, Tom Livingston > > wrote:

>> > List,
>> >
>> > How do you handle hover events on touch devices?
>> >
>> > For example, a button whose bg color changes on hover. On iOS, the
>> > hover change happens on tap. Not really a big deal but I'm not a fan
>> > of this personally. Is it just a matter of moving the hover styles to
>> > a wider breakpoint? This seems simplistic, but technically would work
>> > provided you don't mind hover effects not working if you narrowed your
>> > browser window enough. I'd rather not add script just for this issue.
>> > Am I missing another simple solution?
>> >
>> > Thanks
>> >
>> > --
>> >
>> > Tom Livingston | Senior Front End Developer | Media Logic |
>> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.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] classes...?

[Sam Brown]

Hi David,

On 09.03.2012 12:33, David Thorp wrote:

I've had a couple of private replies saying that this question is
off-topic because it's nothing to do with css.  If that's really the
case, then I apologise for the noise, but before we come to that
conclusion may i just clarify something...


I think this subject is on-topic, but not in the way or for the reasons 
you originally thought. I'll be more specific in response to some of 
your questions below.



On 09/03/2012, at 9:17 PM, David Thorp wrote:


I'm familiar with some concepts from object oriented programming.  
In particular something which i think is called encapsulation.


Personally, CSS didn't make sense to me until I started thinking about 
it like an object oriented language, but not because of encapsulation, 
instead I looked at inheritance. First, keep in mind the distinctions 
between a class in an object oriented language and a class in CSS. I 
won't go into those distinctions here, just know that when I speak of a 
class in CSS, I am not, in anyway, referring back to the idea of classes 
in an OO language.


In languages like C++ you build classes which are portable mini 
programs that do stuff.  You can pick them up and plug them into any 
C++ program, you don't have to know how it works, you just know what 
it does and its input and output and you can just use it without any 
fuss.


Look at a stylesheet structurally where the top of the page are the 
base classes and as you move down you expand on those base classes by 
sub-classing over and over again [1]. The styles get more specific to a 
particular use the more you specify (or sub-class). Using that, you can 
set up some generic elements and structures, like your list, that can be 
dropped into any page and retain certain layout and cosmetic 
characteristics as derived from your base list classes.


Or more accurately, I want to pick that list up and put different 
versions of it (ie. same layout but perhaps different numbers of 
columns, different alignments in each column, etc) into various 
locations in a more complex layout.


Once you have that basic list dropped into a page, it almost has 
polymorphic [2] capabilities based on what it's inheriting from. Here's 
an example:


HTML:
div class=wide
ul class=my-list
liItem 1/li
liItem 2/li
liItem 3/li
/ul
/div

div class=narrow
ul class=my-list
liItem 1/li
liItem 2/li
liItem 3/li
/ul
/div

div class=horizontal
ul class=my-list navigation
liItem 1/li
liItem 2/li
liItem 3/li
/ul
/div

Styles:
ul.my-list {width:300px; margin:0 0 10px 20px; list-style-type:none; 
border:1px solid #ABABAB;}

ul.my-list.navigation {font-weight:bold;}
ul.my-list li {color:green;}

.wide ul.my-list {width:500px;}
.narrow ul.my-list {width:150px;}
.horizontal ul.my-list {float:left; width:575px;}
.horizontal ul.my-list li {float:left; width:80px;}

So in this example, you have a list that is the same structure in all 
three cases, but has a very different layout depending on the class (or 
id) of its parent container. Additionally, you can add a class (or id) 
to the list itself to impart additional styles. You could go even 
further by doing something like this:


.horizontal ul.my-list.navigation {color:blue;}

to say a navigation list that's a child of the .horizontal container 
will have blue text.


The point is, the same essentially self-contained set of elements can 
be presented in very different ways based on the classes/ids you add to 
those elements or based on the classes/ids that the element set inherits 
from.


Ideally I want to keep that list in it's own file and just refer to 
it from the main file.  I don't want to have to copy and paste the 
code from the list file into the main file.


How you implement getting that element set into a page is up to you and 
off-topic to this list.


If this was C++, that would be relatively simple.  The class would 
have methods that you can call with different parameters for different 
situations (eg. number of columns, alignment in each column, 
whatever).  You then add a #include statement at the beginning of your 
main file, that effectively makes the class part of your program, and 
you call it from the main file with method calls and parameters, in 
each different situation.


Again, not really related, but I wanted to emphasize what I was saying 
above about a simple change to a class or how an element set is nested 
can dramatically change how those elements are rendered. Maybe a parent 
element has a class like two-column and a descendant list is then 
rendered in multiple columns, just because you changed what its parents 
are. Change that parent's class (or add another) and you could again 
change how that element set is rendered.



So... my question is... Is this possible in web development  at all?

Is it possible just with plain HTML and CSS files?


As demonstrated, this is absolutely 

Re: [css-d] Screen resolution?

[Sam Brown]

- Original Message 
 From: Michal Suchanek hramr...@centrum.cz
 
 2009/8/11 Felix Miata :
 
  Unfortunately, using pt, mm or in, regardless of DPI accuracy or screen
  resolution, doesn't work out all that much better than px. All but em/ex
  leave visitors' needs and preferences totally out of the sizing equations.
 
 The difference is that with pt preferences like Windows' Large fonts
 apply. With pixels the page is completely cemented to certain number
 of pixels. Fortunately browsers at least tend to scale up the pages
 when printing. Imagine those 16px letters on 1200dpi printouts.


I hate to skew the discussion by introducing another variable, but while it is 
true that a layout designed using px for sizing is essentially cemented in that 
size, all of the modern browsers I have seen now emphasize page zooming over 
text scaling. So it is certainly true that a user may choose to increase or 
decrease the font-size locally, I consider that out of my control and by doing 
so, the user accepts that a layout may not hold together as well as it was 
originally designed. However, if a user has poor eyesight, for example, and 
wants larger text, they can use the page zoom features of the browser to safely 
increase or decrease the zoom and NOT impact the layout of the page at all.

I understand the argument from a purist perspective, usability should be first 
and foremost in any design and/or layout, but realistically, I don't see this 
as a practical issue given the more common usage of page zooming over the now 
declining exposure of any sort of text scaling behavior in modern browsers. How 
long do we design or build in support for what is essentially becoming a 
deprecated behavior?

-- 
-Sam

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

Re: [css-d] CSS shorthand

[Sam Brown]

jc What is the main purpose of using shorthand?  Does it speed up
jc loading time?

Less characters means less data being transferred, but I generally
consider that to be a negligible difference. For me, I feel shorthand
can enhance readability (along with formatting of the CSS in general).

In the end, I feel the use of shorthand is mostly subjective. If it's
beneficial to you and your clients, then it's probably a good/safe
application of CSS shorthand.

-- 
Sam
mailto:[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Using 100% css with no tables

[Sam Brown]

- Original Message 
From: Jeralyn Merideth [EMAIL PROTECTED]

I have been making a serious effort to not use tables in any of my web 
projects. However, this one had me stumped (as I am still fairly new) and I 
used a table inside a div wrapper for the content. Is there another way to do 
it using only css? If so, please help because I have work related projects like 
this every day and would like to make the transition to all css for layout.

http://www.msbanet.org/regional_meetings/regional_meetings06.htm


--

I think the distinction to make is the difference between layout and the 
display of data.

That looks to me like tabular data, so displaying the data in a table is just 
fine. It could also be considered a list of data, so you may work it into 
ordered, unordered, or even a definition list if you think the data could be 
related that way.

-- 
Sam



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] dl/dl!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN - Problem

[Sam Brown]

 - Original Message  
From: Dave Goodchild  
To: Christine Reed  
Cc: css-d@lists.css-discuss.org 
Sent: Tuesday, July 25, 2006 3:46:51 PM 
Subject: Re: [css-d] On 25/07/06, Christine Reed  wrote: 
 I wonder whether anyone knows why this bit of code got there - I didn't 
 put it there... but the problem is, when I take it out... the whole lay-out 
 of my page is disturbed.  So I really need to keep it there so my page 
 displays properly. 

I'm not sure how that code got there, but anything before the DTD will throw 
some browsers (IE in particular) into quirks mode. If you designed for quirks 
mode, then when the browser is rendering in standards mode your page is going 
to display differently.

 Not sure, but why don't you use the xhtml transitional dtd. That html 
 4.01dtd will throw browsers into quirks mode which may pollute 
 results. 
 
 Though that particular DTD may throw a browser into quirks mode, not all HTML 
4.01 Transitional DTDs will. This one works fine:

http://www.w3.org/TR/html4/loose.dtd;

There's no reason to use an xhtml DTD unless you will actually be serving your 
page as xhtml, and I doubt that's the case here.


-Sam

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Multiple class name support

[Sam Brown]

 Actually, IE has issues with multiple selectors. Not that it 
 doesn't work, just that there are caveats (that have bitten 
 me several times).
 
 Refer to the wiki for details:
 http://css-discuss.incutio.com/?page=MultipleClasses

 The wiki doesn't say there is any issue with class=one two three in IE. I
 use that extensively and haven't seen any problems with any browsers as far
 back as IE 5.0. The problem is when you try to use a CSS selector like
 .one.two {}, which doesn't work at all in IE. But you can certainly use .one
 {} or .two {} to match the class=one two three.

 From the wiki:
  Internet Explorer (Win/6, Mac/5.x): broken. The multiple selector will 
select every element with the last class in the selector (order in the selector 
is important, order of the classes in the HTML is not), regardless of the 
presence of the other classes. In other words, IE treats .one.two.three exactly 
as it does .three.
 
 This has forced me, on several occasions to reorder the selector to get proper 
behavior in IE.
 
 To achieve an and effect like .one.two {} gives and have it work in any
 reasonably modern browser, I use nested elements with individual classnames.
 For example, if I want to do the equivalent of:

 The fact that you have to use a workaround to get multiple selectors to be 
applied in IE as they would in other browsers suggests to me that there is, in 
fact, an issue with IE's implementation of multiple selectors.
 
 The flaw is this:
 
 span class=one two fourtext/span
 
 .one.two.four { color: blue; }
 
 .one.three.four { color: red; }
 
 In IE the text in the span is be red. Obviously, it's important that people 
not familiar with the implementation of multiple selectors, like the person 
with the original question, be aware of this issue in IE.
 
 -Sam
 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Multiple class name support

[Sam Brown]

Sunday, June 18, 2006, 6:17:21 AM, Rizky wrote:

R all modern browsers supports them quite well I guess. I've never had 
R problems with multiple class names before. used it all the time ;) and
R specificity is very much depends on the order of classes within the 
R style sheet file, not the ones in the html. so I guess the answer is no.
R cmiiw

Actually, IE has issues with multiple selectors. Not that it doesn't
work, just that there are caveats (that have bitten me several times).

Refer to the wiki for details:
http://css-discuss.incutio.com/?page=MultipleClasses

R Jing Xue wrote:
 I'm just wondering how well is the multi-class feature (i.e. class=style1
 style2 style3) supported in various browsers. Also, is there any significant
 difference between browsers in terms of how the order of class names affects
 the specificity/style precedence?


-- 
Sam
mailto:[EMAIL PROTECTED]

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problems with layout at different dpi

[Sam Brown]

--- Scot Schlinger [EMAIL PROTECTED] wrote:
 I am working on a design that has a problem on
 certain computers (dell 
 laptops within the company) at certain dpis in ie
 6.x windows xp. If I view 
 the design in ff 1.0.6 there are no problems and up
 until the last changes 
 (see below) (so that the news and products areas
 would be in the correct 
 area) it worked fine on ie 6.x (desktop and laptops
 (96dpi)). If the site 
 looks correct at 96dpi on a desktop, in my
 experience, it works fine at 
 120dpi also (very hard to duplicate problem). I made
 some ie hacks to change 
 the width of the news and featured products areas
 and they now (even at 
 120dpi) are in the corect position, but have created
 a gap (don't think this 
 is the infamous 3-gap bug (but could be)) that looks
 to be 2 pixels? But 
 maybe only 1 pixel on the laptops with problems at
 120dpi.

I had a nearly identical problem in that it first
evidenced itself on Dell laptops running IE. The
situation is, IE, by default, scales the rendering to
compensate for the higher DPI. Unfortunately, its
ability to do this effectively is not good. The
problem on our site is that we are using a
pixel-perfect layout that had a width of 749px.
However, 749 is not evenly divisible by 2, therefore
producing rounding issues. The solution was to make
the layout 750px.

It looks like you were heading the same direction with
your solution, so I would, therefore, suggest you just
keep heading down that path until you produce
something that works for you.

There may be other viable solutions, but I wasn't able
to get anything else to work to my/our satisfaction.

-Sam

--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Visual Artifacts in IE6

[Sam Brown]

--- Adam Kuehn [EMAIL PROTECTED] wrote:
 Are there comments 
 in your style sheet?  If so, remove them and the
 problem should go 
 away.

Note, this bug is triggered by comments in the HTML
(between floated elements), not by comments in the
style sheet.

-Sam

--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How to handle higher DPI?

[Sam Brown]

Just after the launch of our newly redesigned site
(http://www.networksolutions.com) we discovered there
are problems displaying pages in IE on some displays
using a higher DPI[1]. As near as I can figure it, IE
scales the rendered page based on the DPI of the
display in an effort to keep things roughly the same
size. That's great for text, but makes images look
like crap and, worst of all, seems to introduce
rounding errors on the containers used thorughout the
site.

Our quick'n'dirty solution/test was to introduce some
Javascript that sniffs out the browser and DPI of the
display and (in psuedo code), if is_IE and
nScaleFactor NOT  1) then setActiveStyleSheet to
alternate. This worked for the test (our homepage),
but the idea of introducing this EVERYWHERE is giving
me a headache.

The questions I present are, has anyone considered the
broad effects of DPI differences in displays when
using IE? Are these differences considered serious
enough in your minds to make these changes
actionable? Is there a clean solution (however you
choose to interpret that)?

Thank you all for the help,

-Sam

[1] DPI on most displays is set to 96ppi, however, on
this particular laptop we were shown, the default (and
shipping DPI) was 120ppi on a widescreen display.
Though I could increase the DPI on my CRT to 120ppi, I
could not reproduce the effect.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/