Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Mi B]

> 20 juni 2017 kl. 12:05 skrev Karl DeSaulniers :
> 
> I chose to go with -*-appearance: unset; because I am able to turn it back on 
> say on an individual page.
> With !important, I have to override and override and override and can't just 
> simply remove the !important.
> Well, not that I have found. 
> 
> Is there a way to remove original !important statements from an element 
> without using !important?
> Heck, even with jQuery you have to override with !important. Just messy IMO.
> 
> 
>> On Jun 20, 2017, at 4:09 AM, Philip Taylor (RHBNC)  
>> wrote:
>> 
>> Karl DeSaulniers wrote:
>>> Hi Philip,
>>> At the time I didn't think to use !important (I try to avoid like the 
>>> plague) but yes,
>>> putting the !important let my borders and shading work without using 
>>> -webkit-appearance:unset;
>> Excellent news.  I completely agree with you that one should eschew 
>> !important as a matter of course, but I think that if all else fails it can 
>> be worth a try.
>> Philip Taylor


I don’t really understand why a using a higher specificity isn’t the best tool 
in this context. Is there a specific reason this won’t work? My apologies if 
this have already been covered.
__
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] list of all the CSS properties?

[Mi B]

> apr. 15 2017 Dean, John :
> 
> If I use the wiki page at 
> https://www.w3.org/community/webed/wiki/CSS/Properties (which is organized 
> quite nicely) instead of the above URL, can I count on that URL persisting 
> for a long time (my first edition should run about 4 years)?

Isn’t the obvious idea to print your own editable short link and change as 
necessary once you’ve re-found a good set of data to link to?

Another idea, if the originator so permits, to save a copy that you host 
yourself with a link to the original.
__
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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Mi B]

target PX/1vw in PX  


__
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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Mi B]

> 1 apr. 2017 kl. 01:09 skrev Crest Christopher :
> 
> Your post is sorta jumbled.  You're saying 1vw or (0.01*1200=96px) ?

I pasted from OpenOffice. Sorry.
(target PX/1vw in PX) >> target px expressed in vw. The actual size of 1vw 
is determined by 0.01*width.

I think it’s mighty strange to think in PX here though. This makes not much 
sense unless you want to investigate a specific rendering. At least one should 
need to investigate multiple renderings and see if they behave as expected.

__
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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Mi B]

> apr. 1 2017 kl. 00:32 Crest Christopher :
> 
> How do you get 96px from 8vw if the viewport width is 1200px ?

width   1200px
1 vw
=0,01*width
px



target  96  px
exp as  (target/1vw )vw>> 8vw



> 
>> Tom Livingston 
>> Friday, March 31, 2017 12:24 PMvia Postbox 
>> 
>> 
>> https://www.sitepoint.com/css-viewport-units-quick-start/
>> 
>> 
>> 
>> Karl DeSaulniers 
>> Wednesday, March 29, 2017 8:18 PMvia Postbox 
>> 
>> @crest,
>> Instead, why don't you explain what you're trying to accomplish (in as few 
>> words as possible)
>> and we can let you know if VW and VH is practical or if you should be using 
>> a different way to accomplish said task.
>> 
>> My thoughts are that you are trying to make your text size as the window 
>> gets resized. Am I correct in this assumption?
>> 
>> 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/
>> Crest Christopher 
>> Wednesday, March 29, 2017 8:20 AMvia Postbox 
>> 
>> ​
>> That is 1000 / 100, how did you get 2.2 from 1000/100 that is 10 ?
>> 
>> Philippe Wittenbergh 
>> Wednesday, March 29, 2017 1:25 AMvia Postbox 
>> 
>> 
>> Ok, I assume, given that paragraph above (a quote from somewhere on the 
>> internets?, source?), I assume you are trying to understand what the 
>> following means:
>> 
>> .myclass { font-size: calc( 2.2em + 2.2vw); }
>> 
>> 1. calc() means: calculate the sum of the following two values.
>> 2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 = 
>> 35.2px.
>> 3. 2.2vw - here is where it gets interesting: `vw` stands for viewport 
>> width, 1vw = 1% of the viewport width.
>> Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 = 2.2 
>> * 10 = 22px
>> 
>> Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px
>> 
>> 3b. Now resize the window, let’s assume the viewport / window is 500px wide; 
>> 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will be 35.2px + 
>> 11px = 46.2px.
>> 
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>> 
>> 
>> 
>> 
>> 
>> Crest Christopher 
>> Tuesday, March 28, 2017 11:24 PMvia Postbox 
>> 
>> Your stomach is hurting from the antacids.
>> I'm only trying to understand.
>> 
>> ​
>> Take my previous example and help me understand.
>> 
>> 
>> 
>> 
>> 
>> 
> 
> __
> 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[Mi B]

> 23 mars 2017 Crest Christopher :
> 
> Speaking of which, can someone once again clarify, for example; 2.2em would 
> equal 4.4vw ?

I haven’t used these new units, but according to 
https://www.w3.org/TR/css3-values/#lengths 'vw’ is "1% of viewport’s width and 
’vh’ is "1% of viewport’s height”. As ’ems’ are not related to the viewport 
”size" at all, then I’d say you can never say what you suggest with any useful 
certainty, unless you somehow set the basic font size in relation to the 
viewport size. 

Once you’ve set the basic font size for a page, you can use ems or any other 
relative size unit to change the size for a contained element. That’s if you’ve 
reset the element specific relative sizes provided by the browser itself 
somehow. Typically sizes are inherited, but HTML elements also have specific 
relative sizes in most browsers.
__
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] anyway to style tag?

[Mi B]

> 15 mars 2017 kl. 16:33 skrev Angela French :
> 
> I would be happy just applying a background color as the latest version of 
> Chrome renders the player seemingly not in a container.


What’s the code design reason for using only the audio element and not wrapping 
it?
__
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] anyway to style tag?

[Mi B]

I still use this http://www.mediaelementjs.com that covers audio and video and 
allows for styling.



> 14 mars 2017 kl. 23:36 skrev Angela French :
> 
> Hello,
> I am experimenting with using the  tag.  I see it looks very different 
> across browsers.  Is there any way to consistently style it across browsers?  
> Everything I see from Google is years old.
> 
> Thanks,
> 
> 
> 
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
> 
> __
> 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] Using CSS to style a back button

[Mi B]

> 23 feb. 2017 kl. 23:48 skrev Rod Castello :
> 
> Hi,
> I'm using this code to generate a button that takes my users to the page
> the just came from.
>  I'm trying to find out how to add a class or id to it, but haven't been
> able to find anything online as of yet.
> 
> The other way I could do it is create the button with HTML and CSS but then
> I don't know how to add the javascript functionality to it.
> 
> Would love a little coaching on this.
> Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL
> INFORMATION"
> http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/
> The back button is here:
> http://www.lotuspetfoods.com/canned-pates-nutrient-table/
> 
> Ideally I'd like the Nutritional Information to be on a pop up like what
> happens when you click on the button called "GLOSSARY". I haven't been able
> to figure that one out yet.
> 
> Thanks in advance for any help.
> 
> -- 
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> rodcastel...@gmail.com
> www.smashcube.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/

__
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] order of rules in a single declaration

[Mi B]

> 14 okt. 2016 kl. 06:54 skrev Karl DeSaulniers :
> 
> The parser does care somewhat. Depends on the browser
> In my research I have found that they load aspects before dynamics.
> 
> Loading the elements basic parameters first like color, background color then 
> fonts, font size, line height then width, height and then margins, padding 
> and then borders, transitions, shadows and then position, clip and display. 

The ordering is only an indication of interpretation. It’s not proof. Certainly 
not for the parser caring about order in the CSS source.




> 
> I got this from the inspect element pane and how different browsers 
> were ordering my css. If you have them out of order, safari would reorder 
> them 
> according to their spec and I had found that most other browsers treated this 
> the same way and reordered them similarly. 
> 
> So it is a yes and no answer with a personal preference included.
> Try it for yourself. Put them in the order you want and see how Safari or 
> chrome or firefox 
> reorder them respectively.
> 
> For example:
> 
> div{
>   width: 100%;
>   margin: 10px 20px;
>   padding: 0;
>   position: relative;
>   display: block;
> }
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Oct 13, 2016, at 10:32 PM, Philippe Wittenbergh  wrote:
>> 
>> 
>>> On Oct 14, 2016, at 12:13 PM, Tom Livingston  wrote:
>>> 
>>> Curious. Does the order of declarations within a single rule matter?
>>> Not specificity between rules.
>>> 
>>> For example:
>>> 
>>> div{
>>>   position: relative;
>>>   display: block;
>>>   width: 100%;
>>>   margin: 10px 20px;
>>>   padding: 0;
>>> }
>>> 
>>> as opposed to:
>>> 
>>> div{
>>>   display: block;
>>>   margin: 10px 20px;
>>>   padding: 0;
>>>   position: relative;
>>>   width: 100%;
>>> }
>>> 
>>> Make any difference?
>> 
>> No. The CSS parser doesn’t care.
>> 
>> For the human eye aka readability of a stylesheet, that is another matter. 
>> Excellent fuel for violent flame wars.
>> 
>> 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/
> 
> __
> 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] iPad differences

[Mi B]

> aug. 11 2016 08:37 skrev Mi B <digital.disc...@gmail.com>:
> 
> 
>> aug. 11 2016 07:38 Karl DeSaulniers <k...@designdrumm.com 
>> <mailto:k...@designdrumm.com>>:
>> 
>> Chrome is built off of Gecko and Webkit anyway. Probably why you didn't see 
>> much difference. 
>> It "technically" IS Safari under the hood.
> 
> No, it isn’t. 

Well, on the computers it isn’t. I forgot the context though (No coffee yet 
:P). On iOS it’s all Webkit. 

> 
> "It’s here: Google replaces WebKit version ID with Blink in latest Chrome 
> build”
> Apr 8, 2013
> http://thenextweb.com/google/2013/04/08/its-here-google-replaces-webkit-with-blink-in-latest-build-of-chrome/
>  
> <http://thenextweb.com/google/2013/04/08/its-here-google-replaces-webkit-with-blink-in-latest-build-of-chrome/>
__
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] iPad differences

[Mi B]

> aug. 11 2016 07:38 Karl DeSaulniers :
> 
> Chrome is built off of Gecko and Webkit anyway. Probably why you didn't see 
> much difference. 
> It "technically" IS Safari under the hood.

No, it isn’t. 

"It’s here: Google replaces WebKit version ID with Blink in latest Chrome build”
Apr 8, 2013
http://thenextweb.com/google/2013/04/08/its-here-google-replaces-webkit-with-blink-in-latest-build-of-chrome/
__
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] OT? HTML 5 root wrapper element?

[Mi B]

> 25 maj 2016 kl. 00:03 skrev J.C. Berry :
> 
> which HTML5 element should
> be used for a wrapper element? 


I write meaningful markup and fall back to general ones like DIV as needed. So 
if my content is an unordered list then UL is the natural wrapper to use for 
its items. I don’t add what is not needed. 

Anyone knows any current CSS layout systems that allow meaningful markup? Most 
I’ve looked at suffers from Divitis so I just ignored them and wrote my own 
templates. Life’s too short for complex systems you don’t need.
__
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] New website

[Mi B]

> mars 11 2016 01:16 Karl DeSaulniers :
> 
> http://designdrumm.com 

Much better, but the animation can be toned down even more. It should tempt the 
visitor, not turn them away. Because of other animations in other sites, 
tolerances for unrequested animations that make you aware of that it is an 
animation are very low. Go for more subliminal and natural ones where the 
movement conveys meaning relevant to the visitor. Just my view on this.

This is all CSS animation? (Didn’t look)
__
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] New website

[Mi B]

> feb. 29 2016 23:32 Karl DeSaulniers :
> 
> Got another website. This time it's my own portfolio website. It is an 
> infinite loop horizontal scrolling responsive website. 

How’s these flickering images responsive? Instant page closer and bye bye. You 
should count on that.
__
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] New website

[Mi B]

> 30 jan. 2016 kl. 18:42 skrev D'Arcy J.M. Cain :
> 
> On Sat, 30 Jan 2016 18:33:56 +0100
> MiB  wrote:
>> 30 jan 2016 kl. 11:42 skrev D'Arcy J.M. Cain :
>> 
>>> Have you considered checking your database access?  WP sites
>>> basically get all their content from a MySQL database.If the
>>> database is slow that will slow down your site.
>> 
>> Well, this shouldn’t be true for server cached URL’s, would it? With
> 
> Not sure why not.  As far as the server is concerned the pages are
> dynamic.  How would it know whether anything changed?  It's only static
> pages that can be cached.

I’m glad you asked. This is not how a well made server cache works. The 
fundamental idea behind a server cache is to render pages and update the cached 
page in question only when you make changes to the source. A web app that  
can’t keep track of this isn’t a web app, it’s a hack. 

Read up: 

"caches the pages of your WordPress blog and delivers them without accessing 
the database…
WP Super Cache gets around that. When it is installed, html files are generated 
and they are served without ever invoking a single line of PHP."
http://z9.io/wp-super-cache/

"How to cache Wordpress DB so it doesn't Query MySql?"
http://stackoverflow.com/questions/15622440/how-to-cache-wordpress-db-so-it-doesnt-query-mysql


__
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/