Re: [css-d] CSS must be called in the head?
> On Sep 21, 2017, at 3:11 AM, Karl DeSaulniers <k...@designdrumm.com> 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 <cr8...@gmail.com> 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 Grid: Can I flow content around blocks?
> On Sep 16, 2017, at 3:05 AM, John Beales <j...@johnbeales.com> 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] td:nth-child(2) negation?
> On Aug 3, 2017, at 4:35 PM, Gautam Sathe <gautamsa...@justdial.com> wrote:
>
> On Wednesday 02 August 2017 08:54 PM, Eric A. Meyer wrote:
>> I confess to being a little bit confused here, because I read this as you
>> asking about a 'td' that's a child of another 'td' and I don't think that's
>> a thing. Could you provide some markup samples to illustrate cases where
>> you do and don't want selection to occur?
So am I :-). The one possibility that I could think of is a `td` **descendant**
of another `td` - aka nested tables.
> I believe what Felix meant is this:
>
> He wants all td's that are nth child (2) i.e. the second TD of each TR to be
> subjected to a particular rule EXCEPT if they also have a colspan.
>
> i.e if a second TD has a colspan the rule should not apply.
>
> I could have misunderstood his requirement of course - in which case the code
> I sent last time would also be invalid.
That one is easy.
td:not([colspan]):nth-child(2) { background: lime; }
You could make the range narrower, e.g. td:not([colspan=2]):nth-child(2) {}
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] Flex item inside css grid
> On Jul 24, 2017, at 10:57 PM, Tom Livingston <tom...@gmail.com> wrote:
>
> I'm still new to grid (and flex, for that matter). I have a sample
> page where an individual flex item squeezes responsively as I want,
> but when it is inside a css grid container, it stops.
>
> https://tomliv.com/flex-in-grid/
>
> Why do they not squeeze up inside the grid?
The `display: flex` inside the grid has little or nothing to do with your
problem.
As an experiment:
.portfoliocard-wrapper > * { border: 2px dotted red; } /* makes the grid-items
fully visible */
.portfoliocard-wrapper img { width: 200px; }
.portfoliocard { background: yellow; }
Now look at your page, resize your window…
As far as I can see, you put NO constrain on your grid-items. They will grow to
accommodate their contents (the width of which is ultimately controlled by the
intrinsic width of the image).
The important thing in this case is this:
https://drafts.csswg.org/css-grid/#min-size-auto
What that says is: The `min-width` of a grid-item is auto (and auto !=0) -
unless the overflow property on the grid-item is set to something else than
`visible` (the initial value). That is the same for flex-items, btw.
Some options to fix your layout:
[*] img { width: 100%; /* OR max-width: 100%*/ }
[*] .portfoliocard-wrapper > * { overflow: hidden; } /* but Safari 10 has a bug
here */
[*] .portfoliocard-wrapper > * { min-width: 0; } /* Safari 10 does not resize
the image. Firefox 54 does, not sure which one is correct */
My preferred option is the first one.
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] PROBLEM with CSS for checkbox - Firefox
> On Jun 23, 2017, at 5:28 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > @Phillippe - > I can't find the source where I found the unset now, but did find this note > on developer.mozilla which may be why the other site didn't list "none" and > why none did not work for the OP. I could be wrong. But `-moz-appearance:none` *did* work for Bill (the OP). The thing that surprised him was a change in Firefox 54. Prior to that, setting `-moz-appearance:none` on a radio-button or checkbox would remove the native look-and-feel, but leave the border + checkmark visible (something that could not be styled). Starting with Firefox 54, setting `-moz-appearance:none` (or `unset`, it gives the same results), the border and checkmark thingie are also removed, just as it does in Webkit + Blink, allowing the stylesheet author to fully style the widget. Have a look at the test case I posted earlier in the thread: https://dev.l-c-n.com/_temp/srbc.html screenshots: Firefox 52: https://dev.l-c-n.com/_b/Firefox-52.png Firefox 54: https://dev.l-c-n.com/_b/Firefox-54.png > Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance > > [ Note: If you wish to use this property on websites, you should test it very > carefully — it is non-standard, and historically its behavior has changed > from one browser to another. In older browsers even the keyword none does not > have the same behavior on each form element across different browsers, and > some do not support it at all. The differences are smaller in the newest > browsers. ] Yes there are difference between Webkit / Blink on one side and Firefox on the other for all values except one: `none` (and even then, see above…), but `unset` returns the same issues as `none`. BTW - the CSS spec only lists two possible values for the `appearance` property: auto or none, with auto meaning “it’s up to the UA”. https://drafts.csswg.org/css-ui-4/#propdef-appearance 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] PROBLEM with CSS for checkbox - Firefox
> On Jun 21, 2017, at 7:24 AM, Philippe Wittenbergh <e...@l-c-n.com> wrote: > > >> On Jun 21, 2017, at 6:36 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: >> >> Again, I didn't see a -webkit-appearance:none in the specs. I may have >> looked right past it. Not sure. > > Which spec did you look at? > > https://drafts.csswg.org/css-ui-4/#propdef-appearance > > Value:auto | none > > the global keywords inherit | initial | unset are a given for every property, > defined in CSS cascade [1] > > > [1] https://drafts.csswg.org/css-cascade-3/#defaulting >https://drafts.csswg.org/css-values-3/#common-keywords I forgot to dd the official Webkit list: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_appearance > button, button-bevel, caret, checkbox, default-button, listbox, list item, > media-fullscreen-button, media-mute-button, media-play-button, > media-seek-back-button, media-seek-forward-button, media-slider, > media-sliderthumb, menu list, menulist-button, menulist-text, > menulist-textfield, none, push-button, radio, search field, > searchfield-cancel-button, searchfield-decoration, > searchfield-results-button, searchfield-results-decoration, > slider-horizontal, slider-vertical, sliderthumb-horizontal, > sliderthumb-vertical, square-button, textarea, textfield (`none` highlighted) 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] PROBLEM with CSS for checkbox - Firefox
> On Jun 21, 2017, at 6:36 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Again, I didn't see a -webkit-appearance:none in the specs. I may have looked > right past it. Not sure. Which spec did you look at? https://drafts.csswg.org/css-ui-4/#propdef-appearance Value: auto | none the global keywords inherit | initial | unset are a given for every property, defined in CSS cascade [1] [1] https://drafts.csswg.org/css-cascade-3/#defaulting https://drafts.csswg.org/css-values-3/#common-keywords 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] PROBLEM with CSS for checkbox - Firefox
> On Jun 20, 2017, at 7:05 PM, Karl DeSaulniers <k...@designdrumm.com> wrote:
>
> 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?
1. Did you know that for input[submit] or [button] you can completely remove
the native appearance by simply specifying a gradient-image as background - no
need for -webkit-appearance:none; ? At least on iOS 8-9-10 not sure about
Android blink based browsers. No need for !important.
[type="submit"] { background: linear-gradient(#ccc,#ccc); }
That doesn’t fully work for select radio-buttons or checkboxes unfortunately (
the gradient is there but there is still the native texture).
2. You _can_ override the !important by upping the specificity
E { property: value !important}
body E { property: other-value !important}
3. For form controls, I vastly prefer using the appearance property, as it
clearly indicates what you are doing (intent: remove the native look-and-feel)
and it avoids using !important. Using 'none' or 'unset' is up to you, the end
result is the same, and * the computed value is the same in both cases *:
*-appearance: none.
4. While reviewing some of my form-controls snippets yesterday, I noticed that
Edge (at least v15, but probably older as well) fully recognises the
-webkit-appearance property – and it works the same as with Safari / Blink.
5. On the subject of Edge (and IE 11):
- select widgets: https://msdn.microsoft.com/library/Hh771821
- radio / checkbox: https://msdn.microsoft.com/en-us/library/hh771816
- input[type=file]:
https://msdn.microsoft.com/en-us/library/windows/apps/hh779844.aspx
https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx
Have fun with those.
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] PROBLEM with CSS for checkbox - Firefox
> On Jun 18, 2017, at 7:56 PM, william drescher <will...@techservsys.com> wrote:
>
> The original problem was that firefox sized the radio buttones and checkboxes
> very small and ignored the
> "html {font-size 2.2 rem}" for them.
> I am writing this for an intranet and ff is the only browser supported. I
> haven't had time to try the suggested fixes.
here is a test page…
https://dev.l-c-n.com/_temp/srbc.html
The checkbox uses a SVG file as background image. Feel free to
steal/borrow/reuse/…
But I was wrong to originally suggest using the [checked] attribute. That never
matches when the checkbox / radio is toggled. I should have suggested using the
`:checked` pseudo-class instead.
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] PROBLEM with CSS for checkbox - Firefox
> On Jun 18, 2017, at 6:53 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Yes I have. I had to use it once when mobile phones were styling my submit > buttons and not letting my style be applied. > It would allow the color, but not the appearance like borders and shading to > be applied. > Once I added the -*-appearance: unset, it allowed my style to be applied > including borders and shading. IOW - you did the same as what appearance:none does. And it would not allow the author styling of border / background of radio buttons and checkboxes in Firefox older than 54, even when using !important. It also does _not_ help for radio buttons and checkbox on Mobile Safari (it does for input[type=button|submit]). FWIW, the problem the OP has is that, starting with Firefox 54, his checkboxes and radio buttons lost their borders, and the indicator for the checked state. But he does want to remove the native look-and-feel. 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] PROBLEM with CSS for checkbox - Firefox
> On Jun 17, 2017, at 9:08 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Basically you told the browser your checkboxes and radios have no appearance. > I think what your wanting is to "unset" the native appearance so you can > apply your own? > > That would be: > > -moz-appearance: unset; > -webkit-appearance: unset; > -khtml-appearance: unset; > -o-appearance: unset; > > I believe.. Have you tried that? It would remove the checkbox/radio “look” anyway, and it won’t give borders, nor give any appearance for the checked state. Have a look using the developper tools of your choice, and check the cascade… Using type=checkbox as an example For Safari + Blink, the UA stylesheet says: -webkit-appearance: checkbox; border-style: initial; /* that means: no border, as the root html does not specify any border style. */ For Firefox: -moz—appearance: checkbox; border-style: unset; So, it will give exactly the same result, different of what Firefox 53 did (which only removed the platform specific “look” when the -moz-appearance: checkbox; is specified). 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] PROBLEM with CSS for checkbox - Firefox
> On Jun 17, 2017, at 3:58 AM, william drescher <will...@techservsys.com> wrote:
>
> I have:
>
>
> <!--
> html {
>font-size: 2.2rem;
> }
> button, select, input, textarea {
>font-size: 1rem;
> }
> [type="checkbox"], [type="radio"] {
>-moz-appearance: none;
>height: 1rem;
>outline: 2px dotted red;
>width: 1rem;
> }
> -->
>
>
> Since the most recent update of Firefox the checkboxes and radio buttons no
> longer show (but the outline does) and when clicked the checkbox/radio still
> don't show, but the receiving program acts as if it has received the checked
> box/radio
That is kinda intended, in order to allow full styling of those widgets [1].
Your options are:
* remove the -moz-appearance: none; (but I guess the result of that is not what
you want)
* style the widgets yourself,
[type="checkbox"], [type="radio"] {
-moz-appearance:none;
height: 1rem;
outline: 2px dotted red;
width: 1rem;
border: 2px solid /* <—— add */
}
[type="checkbox"][checked] { position: relative}
[type="checkbox"][checked]::before {
content: '✓';
line-height:1;
font-family: monospace;
position: absolute;
top:50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
(that gives some results in my copy of FX running on macOS)
or simpler, create a background image for the checked state
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=605985
https://developer.mozilla.org/en-US/Firefox/Releases/54
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
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] Pure CSS variables (no preprocessors)
> On May 19, 2017, at 4:20 AM, Reese <cs...@reeza.com> wrote: > > Is anyone playing with this yet? Using it in production? Yes and yes. To the second question “production” is for webviews inside an iOS app. > Browser support is reportedly 69% worldwide, US-only support is 77% > according to caniuse.com (as reported in the article) and IE-Edge > support is in the works That is the crux of the issue if you want to deploy those stylesheets on the open web, right? MS Edge 15 (latest version) has only minimal penetration so far (not surprising, it has not been widely released…). All previous version don’t support css variables. FWIW, I have _on average_ a 15%~20% user base for IE 11. 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] How do you handle situations like this?
> On May 19, 2017, at 4:49 AM, Tom Livingston <tom...@gmail.com> wrote:
>
> I have a content module. A div containing text above a flexible-width
> video (could easily be an image too).
>
> I have 2 of these on a web page. They stack on narrow widths, and go
> side-by-side at wide enough widths. They have different amounts of
> text in each. I will inevitably be asked to make the videos line up
> with each other when these modules appear side-by side. I started down
> the path of a min-width on the parent and positioned the videos
> absolute bottom:0; This presents it's own issues and is finicky.
>
> Any other ideas? I think I am in a 'forest for the trees' situation
> here and can't see another easy solution.
Flexbox?
text text text
video
text text text
video
The trick then to align the videos at the bottom: .module > div + div {
margin-top: auto}
It is a situation where display: grid **with display: subgrid ** support would
be nice. Unfortunately, that is a no-go for the next 2 years.
Assuming I understand it all correctly…
PS - Something similar, images of various sizes, caption, to give you some idea.
https://emps.l-c-n.com/category/image/sand-reflections/
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] list of all the CSS properties?
> On Apr 15, 2017, at 8:17 PM, Dean, John <john.d...@park.edu> wrote: > > https://www.w3.org/TR/CSS/#properties. That link used to take me to a nice > table with all the properties with their associated default values and their > associated inheritability status. > > But now, that link takes me to "section 4.4. Property Index" in the "CSS > Snapshot 2017" page. That page is indeed the list of all existing (or under development) CSS properties. > And that section lists things like align-content and box-decoration-break, > which I don't think are CSS properties (?). Both certainly are. If you follow the link from both you end up at their respective modules. ‘align-content’ is currently being implemented (it already is used for things like CSS-Flexbox, CSS-Grid). > So do you know of the best URL for a complete list of CSS properties so I can > refer to it in my book? > > If I use the wiki page at > https://www.w3.org/community/webed/wiki/CSS/Properties (which is organised > 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)? Hmm, that page, as far as I can tell, mostly lists the properties from CSS2. It is a good starting point, but doesn’t cover more recent (important) developments such as the aforementioned CSS-Flexbox and CSS-Grid modules, with quite important as building boxes for layout. Things are constantly moving and 4 years is a *long* time in the world of web development. Not sure what to suggest, I think your first link ( https://www.w3.org/TR/CSS/#properties) is probably the most stable entry point, as it will keep updating to point to the most recent development. An even more complete list is this: https://drafts.csswg.org/indexes/ (but note the draft status). As an alternative, there is the excellent documentation maintained by the people at mozilla.org: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference Good luck with your project. 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Apr 6, 2017, at 9:05 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Thanks Kevin for the link. > Curious though. As the page did not explain, what is "ch"? > Character height? > >> On Apr 4, 2017, at 6:21 PM, Kevin Randall <ksrand...@gmail.com> wrote: >> >> w3schools.com/cssref/css_units.asp Hmm, as usual, the explanations from that site are half-correct at best. Here is the spec text about `ch`: https://drafts.csswg.org/css-values-3/#ch As far as I can remember, the `ch` doesn’t really stand for anything, and I don’t think there is an equivalent in the typographic history. IOW it is an arbitrary name. 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] IE Edge svg hover issue
> On Apr 6, 2017, at 1:47 AM, Tom Livingston <tom...@gmail.com> wrote: > > Here is my structure and css: > In Edge, on hover the svg disappears when you move your cursor off the > element. > > Anyone see why or know what's up? I've been messing around with style > changes, but can't see what Edge is doing. I'm sorry I can't provide a > link. I'll take any guesses at this point. Is this what I should see? https://dev.l-c-n.com/_junk/tl.html (best guess, after trying to desassify the provided CSS) If so, that works perfectly fine on this side with Edge supposedly up-to-date. 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Apr 4, 2017, at 6:34 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > 0.08em does equal 8%, but 8vw may or may not equal them 2 different kind of percentages… for `em`, a percentage of the font-size value on the parent / ancestor / root. for `vw`, a percentage value of the width of the window, a complete different kind of thing than above. 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Apr 4, 2017, at 2:13 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > I believe that.. > 0.08em = 8% = 8vw > (correct me if I am wrong) Why do you believe that? As I’ve written previously, it would be by sheer accident — in this case, _if_ the window is _exactly_ 1200px wide _and_ the computed value of font-size is actually exactly 16px. (and my cat sleeps more than 10cm away from my keyboard…) Please stop comparing the two things, it is a waste of time. 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] Ham Menus
> On Apr 1, 2017, at 10:11 AM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > but must Hamburger menus look like Hamburgers or otherwise will it confuse > users ? The icon itself (3 horizontal lines) often confuse users… So, no, you don’t have to use it. Best thing to do: use a text string, such as “menu” or “navigation”. 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Mar 29, 2017, at 12:24 PM, Crest Christopher <crestchristop...@gmail.com>
> wrote:
>
> I'm only trying to understand.
>
> In this example, at a viewport width of 0, the font-size would be
> exactly 1em. As the screen >gets larger, the value of 1vw would be
> added to the minimum font size of 1em. But this >technique is not
> always ideal; often we want to set a minimum font size at a screen
> size other >than zero.
>
>
> Take my previous example and help me understand.
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/
__
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 ?
> On Mar 29, 2017, at 8:06 AM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > Correct me if I'm wrong but wouldn't the following be 4.4em if 2.2vw is added > to the font-size of 2.2em ? > > calc( 2.2em + 2.2vw );. NO. The `vw` unit is short for `viewport-WIDTH` [1]. Per spec text: “vw unit: Equal to 1% of the width of the initial containing block.” Or perhaps I should qualify my answer: It _is_ possible that the **computed** value of 4.4em equals the computed value of `calc(2.2em + 2.2vw)`, if * the initial containing block (window) is a certain width, * the cascade doesn’t mess up with your calculations, * the stars align * the stock market crashed * …. * …… * my cat sleeps more than 10cm away from my keyboard In other words, almost certainly never. [1] https://drafts.csswg.org/css-values-3/#viewport-relative-lengths 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Mar 29, 2017, at 8:06 AM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > Correct me if I'm wrong but wouldn't the following be 4.4em if 2.2vw is added > to the font-size of 2.2em ? > > calc( 2.2em + 2.2vw );. NO. The `vw` unit is short for `viewport-WIDTH` [1]. Per spec text: “vw unit: Equal to 1% of the width of the initial containing block.” Or perhaps I should qualify my answer: It _is_ possible that the **computed** value of 4.4em equals the computed value of `calc(2.2em + 2.2vw)`, if * the initial containing block (window) is a certain width, * the cascade doesn’t mess up with your calculations, * the stars align * the stock market crashed * …. * …… * my cat sleeps more than 10cm away from my keyboard In other words, almost certainly never. [1] https://drafts.csswg.org/css-values-3/#viewport-relative-lengths 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Mar 24, 2017, at 11:02 AM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > When using vw/vh em are always going to be doubled ? What about pixels ? > > For example; 2em is equal to 4vw. Also > > If the default font size is 16 pixels and if |2vw| is 2% of the viewport’s > width ? Mr Crest, As others have already said: `em` units and `vw` units have NOTHING, I repeat, NOTHING, to do with each other. (also, if you don’t mind, please take the time to trim your replies to this list) 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] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?
> On Mar 23, 2017, at 7:34 PM, Philip Taylor <p.tay...@rhul.ac.uk> wrote: > > It is only in the last few days that I have learned of the existence of vh > and vw units. I can already see just what an advance they represent, and I > am very sorry that I did not learn of their existence earlier. To which list > should I subscribe if I wish to be regularly and reliably informed of changes > to the CSS specification(s) ? There is the mailing list from the CSS WG: https://lists.w3.org/Archives/Public/www-style/ That used to be high traffic, but most of the (technical) discussions have moved to the GitHub repos. They do post when working drafts / Candidate Rec etc are posted, though. - Or if that is your kind of thing, the feed for the CSS WG: https://www.w3.org/blog/CSS/feed/atom/. Mind you, browser makers start implementing (part of) specs (long) before things reach a stable state. `vh` and `vw` units (and their companions `vmin` and `vmax`) have been implemented for quite a few years - even IE 11 supports them. An other resource is the list of CSS WG editor drafts: https://drafts.csswg.org. 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] page gap in IE edge/11
> On Mar 22, 2017, at 8:28 AM, Tom Livingston <tom...@gmail.com> wrote:
>
> For me, there was extra height to the page, with a white bg. I could scroll
> past the orange bg. Again, in I.E. Edge/11.
Hmm - I did’t see that at all, but then, I can’t make the window tall enough
(screen size limit of the laptop).
Have you thought about using `vh` units to set the height (as in: ` body,
.pagewrap { min-height:100vh } `) ? And remove all that percentage-based
height/min-height. I suspect that might be the issue.
You could go further, and use `display:flex; flex-flow:column;` to center your
content (and on the way simplify your markup…). Of course, all depends on the
browsers you need to support.
Minimal example: https://dev.l-c-n.com/_junk/__x.html
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] page gap in IE edge/11
> On Mar 22, 2017, at 4:54 AM, Tom Livingston <tom...@gmail.com> wrote: > > Here is a sample page: > https://tomliv.com/wip/ > > I've tried various page sizes on load and resizing and can't track down the > space I am getting in IE Edge and 11. Can anyone tell me where the extra > space in the page is coming from? The page scrolls for a bit for 'no > apparent reason'. It's fine in FF, Chrome and Safari. Can you clarify what “page gap” you mean? Page displays identically in Safari and Edge latest here. I should note that the form overflows the window in Edge no matter what, as it is too tall for the (maximised) window on that laptop. 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] Hidden UL/LI
> On Mar 21, 2017, at 3:30 AM, Tom Livingston <tom...@gmail.com> wrote: > > I have a sample here: > > https://tomliv.com/navigation-menu/index.html > > Though not perfect, you get the idea… As always, those things are not exactly friendly to keyboard users (and eventually, screen readers) as the sub navigation remains completely hidden to them (it works better for small devices, given the script, think). > On Mar 21, 2017, at 3:32 AM, Tom Livingston <tom...@gmail.com> wrote: > > This does work with touch devices I've tested, btw… Define “touch” device… an iPad would have problems, similar to the keyboard users above. It would be acceptable if your top-level links point to some sort of landing page(s), where the subnav links are explicitly described. 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] Inline Anchor failing to work ?
> On Feb 22, 2017, at 2:58 PM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > I wondering why the anchor this inline style sheet is not working ? > email: style="color:white;"># What is failing? Error(s) I see: padding can’t be negative (as set on the ``). Maybe other things are interacting with the whole construct… Lacks context. 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] What screen-width for 'smart-watches'?
> On Jan 8, 2017, at 8:02 AM, GJim <jarne...@wyomerc.com> wrote: > > Are these sufficient for smart-watches, or should I define another transition > and minimum width? Are there any “smart-watches” that ship with a web browser? Apple’s watch certainly does not; no idea about other brands. I know some Korean companies (LG) have been contributing to the CSS WG to develop a spec for round displays [1], but I think their purpose is more for building apps. Anyway, for the widest possible gamut of displays / window-width, don’t constrain yourself by forcing a minimum width, particularly on your main layout. [1] https://drafts.csswg.org/css-round-display/ 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] Changing the Color of points
> On Jan 3, 2017, at 2:12 PM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > I have multiple paths with the same class with a style applied to the > class = st0. I don't see a series of blue points ? Of course not. Anchor points are *never* visible. What is visible is the line connecting two anchor points (anchor points **within the same **). If you want a series of dots, perhaps you want the element? Two s with one anchor point each will never connect to each other. 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] Changing the Color of points
> On Jan 3, 2017, at 12:10 PM, Crest Christopher <crestchristop...@gmail.com>
> wrote:
>
> I've taken a step away from my web development projects to finish other
> projects and far from done so, bare with me if I forgot a thing or two
> until the get the motor running :)
> At this point I want to make the points visible and change the color,
> they all have the same path class but I don't care about that, yet ;-)
>
> I have a SVG which is strictly only the points of the SVG file made up
> of a series of classes; the SVG points are not visible ?
>
> HTML
>
>
>
>
>
>
> CSS
> #Artwork_1_1_ .st0 {
> color:blue;
> }
It is `path` with only one anchor point. How do you expect anything to be
visible?
Besides, in SVG, it is `fill` and `stroke`.
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] help getting my under by
> On Nov 29, 2016, at 7:28 AM, Angela French <afre...@sbctc.edu> wrote:
>
> I'm having a heck of a time getting my figure caption text to be underneath
> my figure. Thank you for any advice.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
> This is my html:
>
> alt="" width="600" height="341">
> this is my caption
>
>
>
> This is my CSS:
>
> figure {
>position:relative;
> }
>
> figure img {
>display:block;
> }
>
> figcaption {
>
>clear: both;
>position:absolute;
>bottom:0;
>left:0;
>
> }
Well based on your example (good & correct HTML, no need for more), the caption
is exactly where you want it to be - given the code above. So what exactly is
your issue?
Notes:
1. you don’t need the `clear:both` on the figcaption, position: absolute takes
care of that.
2. there is lots of white space at the bottom of the image (inside / part of
the image)
3. tip for debugging: use bright borders and backgrounds to see where those
are, how they are sized (the developper tools in your favourite browser should
do that as well…)
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] order of rules in a single declaration
> On Oct 14, 2016, at 12:13 PM, Tom Livingston <tom...@gmail.com> 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/
Re: [css-d] Some Way to Clip Image and Keep Border
> On Oct 4, 2016, at 7:43 AM, Rick Gordon <li...@rickgordon.com> wrote:
>
> Is there some way, using clip-path or some other way, to clip (for instance)
> the top and/or bottom edges of an image without losing the image border on
> the clipped edges?
An image editor ?
How is the border on the image generated?
img { border: 10px solid } or something like that ?
In those cases `clip-path` will clip the border and everything on the clipped
edges. And it has only limited support so far.
I’m not 100% clear of what you want, though. Do you want to actually crop an
unwanted part of the image?
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] Select box not expanding
> On Sep 15, 2016, at 7:57 AM, Tim Dawson <t...@ramasaig.com> wrote:
>
> I do have a work-around if necessary (remove 'position: relative'). But why
> do I a problem in the first place? Any help would be much appreciated.
Given your current mark-up, the right column overlaps (covers) the left column,
making any click through (on the select) impossible, try giving `fieldset ul {
background: red; }` to see what I mean.
First step, as Karl notes, use a `` to wrap you text in. That is more valid
html anyway.
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] a:hover state in different browsers
> On Aug 13, 2016, at 10:19 AM, Tom Livingston <tom...@gmail.com> wrote: > > The differences in font rendering between browsers, even with the same > font specified, wouldn't position things differently? Sure, but that has nothing to do with rem or other font(-size) related units (ems, ch, etc). 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] a:hover state in different browsers
> On Aug 13, 2016, at 9:05 AM, Tom Livingston <tom...@gmail.com> wrote: > > I personally wouldn't use rem's for all of the units involved with > that structure. rem is based on the root element's font size, making > it - I assume - dependent on how each browser renders a font, which is > where your slight differences come from. Rem unit is perfectly fine in this case, as it computed value is based on the font-size (independently of which font-family is used). The cross-browser default is 16px for any given font, last I checked. OTOH, the used font-family may affect where elements end up on the page, at paint-time. A small font like Times will use less vertical pixel space then a large font like Verdana. 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] a:hover state in different browsers
> On Aug 13, 2016, at 8:52 AM, John J <cr8...@gmail.com> wrote: > > At the link below, I'm having trouble getting the hover state to look the > same across browsers. On hover, there should be a red line under the > hovered-over item as wide as the thin gray line below it, as thick as that > line is. > > The thickness seems to match, but the positioning is off, browser to > browser. As Tom notes, you specify two different values for border-width. That matters as this affects where the border is positioned (as the computed value is a non-integer). Browsers ‘pixel-snap’ borders to the nearest pixel, to make sure the border looks crisp. > Safari and Firefox show the hover-state line a bit too low; Chrome Canary > shows it exactly where it needs to be. It could be that Chrome takes a different decision where to snap the border then Safari / Firefox. There are multiple things that will affect this. For one, you don’t specify a `line-height`, the default value will be normal. Depending on the font-family in use (and the availability of that font on any platform) this can be quite different (the difference at our font-size can 1 or 2 pixels). Second, again, that value almost certainly competes to a non-integer, that will contribute to the overall height of the box(es) and affect the position of the border. Other factors that may affect this: you specify height for multiple boxes. Does this compute to an integer ? Ditto for your use of padding-top. > Am I working against myself, trying to do something that's too tricky by > trying to get a hover element to line up with, basically the bottom of the > header which is 3 parents up from the nav? > > Thank you for any clues! There is nothing inherently wrong with what you are attempting, but you are up to the limits of display technology. If you compare carefully, you’ll probably notice small differences between a retina and a non-retina display. 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
> On Aug 12, 2016, at 10:03 PM, Andre Osku Schmidt
> <andre.osku.schm...@gmail.com> 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
> On Aug 12, 2016, at 9:42 PM, Chris Rockwell <ch...@chrisrockwell.com> 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 <k...@designdrumm.com> 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] iPad differences
> On Aug 11, 2016, at 3:23 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > They are not the same resolution or size. > > The biggest difference between these tablets is screen density. > The iPad mini's display is 7.9 inches diagonally, with 1024 x 768 resolution > at 163 pixels per inch. > The iPad with Retina display packs a punch — 9.7 inches, with 2048 x 1536 > resolution at 264 pixels per inch. But those have absolutely no effect on CSS. Both devices have exactly the same size as CSS is concerned 1024 by 768 CSS pixels (which as you know are not the same as screen pixels). 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] iPad differences
> On Aug 11, 2016, at 8:24 AM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > Although > the simulator uses iOS 7.1.2 and since I know nothing of iOS, strictly > Windows but from what may be possible is newer versions of iOS may have > issues such as this fixed ? Latest iOS version is 9.3.x. Hard to say if your issue is real, a bug in an older version of iOS or something else. As always a link to the issue at hand would immensely facilitated the discussion. 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] Flexbox struggle
> On Aug 11, 2016, at 5:57 AM, Tom Livingston <tom...@gmail.com> wrote:
>
> a p:last-child{align-self: flex-end;} to get the last to stick to
> the bottom of s, but this isn't working. Where am I messing it up?
Perhaps:
a p:last-child {
margin-top: auto;
}
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] iPad differences
> On Aug 10, 2016, at 11:37 PM, Crest Christopher <crestchristop...@gmail.com> > wrote: > > TheiPad & iPad mini are both the same CSS width but when previewing both > devices; the iPad Mini give me problems with one element. Shouldn't the > results be identical ? Are you testing with real world, physical devices? Or with some emulator / simulator kind of thing? The latter gives you at best an approximation of the real thing (assuming you use an emulation that uses the WebKit rendering engine). 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] Cascade Image override ?
> On Jul 29, 2016, at 12:39 AM, Tom Livingston <tom...@gmail.com> wrote:
>
> This:
>
> background-image:none,none,url("images/bg_paper.Hi.jpg");
>
> should work. Same as I did here:
>
> @media screen and (min-width: 480px){
> .test{
> position: relative;
> background-image: url("img/img1.jpg"), url("img/img2.jpg"),
> url("img/img3.png");
> background-repeat: no-repeat;
> background-position: 0 0, 500px 0, 1000px 0;
> height: 500px;
> width: 5000px;
> }
> }
> @media screen and (min-width: 900px){
> .test{
> background-image: none, url("img/img4.jpg"), none;
>
> }
> }
>
> Just use the correct order and positioning for the new image.
You don’t need to specify the “none” in your second block
background-image is a list; the second rule completely overwrites the first
rule (the second rule is a list which contains only one item).
thus the following will only display one background-image at the specified
position when the viewport is larger.
@media (min-width:900px) {
.test {
background-image: url("img/img4.jpg");
background-position: 10px 10px;
}
}
If background-position is _not_ specified inside the second block, it will of
course inherit from the first block, and will use the first specified position
in that rule. The same applies to background-size, background-repeat, etc.
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] rendering of icon in Windows browsers
> On Jul 28, 2016, at 12:21 PM, Sara Haradhvala <har...@comcast.net> wrote:
>
> I think you’re right. The problem is that I need to use a glyph from
> photoshop that isn’t assigned a unicode value. Is there any way to use this
> as text? Or does it have to be turned into an svg image?
That would solve you problem as well. A SVG image would be ideal (resolution
independent. But insert it as a background-image, to cut down the noise for AT
users. (I assume the icon is mostly decorative)
li::before {
content: '';
background: url('path/to/icon.svg') no-repeat;
display: inline-block;
width: 16px;
height: 16px;
/* etc - adjust to taste and needs */
}
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] rendering of icon in Windows browsers
> On Jul 28, 2016, at 7:05 AM, Sara Haradhvala <har...@comcast.net> wrote:
>
> I set up this unicode in CSS
>
> .menu li::after {
> content: “◆”;
> font-family: athelas, serif;
> font-weight:bold;
> font-size: 16px;
> }
>
> My problem is that the diamond is much bigger in IE and somewhat bigger in FF
> on Windows.
One guess [*], as I don’t have access to that font (athelas): it does **not**
contain a glyph for the character you want to display, and neither does the
default serif font, then system fallback occurs – that is: Firefox and IE (Edge
also ?) fall back to the default system font that contains that glyph. That
happens to be bigger than the default one on OS X. And who knows what happens
on Android.
There is not much you can do about it… except specifying a (fallback) font that
is available cross platform (or via @font-face) that contains that glyph. For
example:
font-family: 'athelas', 'arial unicode MS', sans-serif. // Roboto, the default
on Android, has very similar metrics
[*] a quick test on fonts.com (the official provider of that font) shows that,
indeed, it does not contain a glyph for that ‘◆’ character.
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] is use of rem bad?
> On Jul 21, 2016, at 1:38 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Same link you gave had this below what your were referencing. > > [quote] > The exception is when they occur in the value of the font-size property > itself, in which case they refer to the computed font metrics of the parent > element (or the computed font metrics corresponding to the initial values of > the font property, if the element has no parent). > [/quote] Oh, sure, that is inheritance at work. For any other property that accepts a ``, if it is expressed using the `em` unit, it will depend on the computed value of the element itself. That means (to come back to the rem vs em topic) that the resulting value for padding, border, margin, background-position, etc are depending on the nesting inside the document tree if using `em` units. The `rem` unit avoids that. 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] is use of rem bad?
> On Jul 21, 2016, at 12:17 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > That is incorrect I believe. FWIU Em is based off of the first parent element > to declare a 'px' based declaration of same type. no. http://www.w3.org/TR/css-values/#font-relative-lengths [quote] em unit Equal to the computed value of the font-size property of the element on which it is used. [/unquote] 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] is use of rem bad?
> On Jul 21, 2016, at 2:05 AM, John J <cr8...@gmail.com> wrote: > > Working on my code, I decided to see what they CSS validator had to say > about it, and it threw out 154 errors, most of which were about rem as my > value of measure for things like padding, type, borders, margin. > > I am using rem on advice of a developer who said that a certain pinhead, > un-named browser needs it; other browsers can use/deal with it too. > > Yet the validator threw a hissy..Should I abandon all efforts to support > arcane versions of this browser, and stick only with em? The default configuration of the CSS validator should handle the `rem` unit without any problems (other wise, make sure “CSS Level 3” is selected under the “more options” disclosure triangle thingie). http://jigsaw.w3.org/css-validator/ I use rem units all the time for everything and more without trouble. All modern browsers handle this unit correctly. If you need support for IE 8 – which doesn’t support the `rem` unit, then what Tom says… (and note to Karl: no, just blindly replacing `rem` with `em` is _not_ the way to go. The computed value of something specified with the rem unit is based on the computed value of the font-size as set on the root element. For the `em unit` it is based on the font-size of the element itself.) 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] media queries following prior rules
> On Jul 12, 2016, at 12:28 PM, Tom Livingston <tom...@gmail.com> wrote: > > On Monday, July 11, 2016, Philippe Wittenbergh <e...@l-c-n.com> wrote: > >> How did Peter Gabriel creep into the conversation? > > > He sang the song "Sledgehammer" ;) Ah. Thanks. I learned something today! Last time I listen to that type of music must have been 20years ago or so… last 2 hours playlist: Peter Brötzmann - Münster Bern, followed by Kuwayama Kiyoharu & Masatoshi Urabe - From the abolition port Studies in contrasting reflections 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] media queries following prior rules
> On Jul 12, 2016, at 9:44 AM, Tom Livingston <tom...@gmail.com> wrote:
>
> While Philippe may well me right about Peter Gabriel singing the theme song
> for this technique, I have used this method frequently, with a slight
> difference. I use:
>
> html{box-sizing: border-box;}
> *, *:before, *:after { box-sizing: inherit; }
>
> Possibly picked it up from here:
> https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
>
> Though I can't put my finger on it right now, I have read where this method
> isn't really as a performance hit as it may seem.
It is not really the performance “hit” that I object to (modern browsers can
handle the universal selector perfectly fine, even in deeply nested trees –
still use in moderation…), it is the “inherit” value.
(and I never have had the need to use such a construct myself… my aversion to
so-called ‘reset’ css thingies is well-known on this list)
How did Peter Gabriel creep into the conversation?
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] media queries following prior rules
> On Jul 12, 2016, at 1:13 AM, John J <cr8...@gmail.com> wrote:
>
> At the link below, the name, email, subject fields don't appear to be
> obeying rules governing width as in the previous media breaks..
>
> at 360 and 320, those fields exceed the width of their parent, rather than
> respecting padding set prior..maybe I'm missing something..if I have my
> rules set up correctly, the css should behave a certain way until told
> differently in the next media query, right?
>
> Thank you for any insight about this!
>
> John
>
> http://john-a-johnson.com/contact.php
As suggested by Peter, the box-sizing rules are messing things up (big time).
You have, on line 6 of style.css
*, *:before, *:after { box-sizing: inherit; }
That is a sledgehammer – and incredibly damaging – approach to a non-existent
problem. Remove that rule and only override the default box-sizing in a case by
case approach.
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] Responsive grid layout with graphics and scaling
> On Jul 7, 2016, at 11:23 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Your the second one to mention the justify text. > I may have to look into that, but I really don't like align left. > Either space between words or on the side of the whole paragraph. > Personally I like the text to make columns. You might consider hyphenation to alleviate the “rivers” in the text (words spaced out more than needed). That makes things harder to read. https://developer.mozilla.org/en/docs/Web/CSS/hyphens (you’ll need prefixes) On small screen devices (anything below an iPad…) I really prefer reading text that is left-aligned though (even with hyphenation turned on). 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] How to: enlarge all content for accessibility
> On May 30, 2016, at 3:02 AM, william drescher <will...@techservsys.com> wrote:
>
> On 5/29/2016 9:13 AM, Philippe Wittenbergh wrote:
>>
>>> On May 29, 2016, at 6:49 PM, william drescher <will...@techservsys.com>
>>> wrote:
>>>
>>> That works nicely except the radio buttons stay small.
>>
>> Try setting width and height on those:
>>
>> [type=checkbox], [type=radio] { width: 1rem; height: 1rem; }
>>
>> Or something like that - adjust to taste and needs, etc.
>> Bare in mind that the look of those things is actually an image.
>>
> Interesting. Doing that changes the spacing, as if they were larger, but the
> radio button stays the same size.
Interesting. Firefox on OS X scales the image along the size, Safari (OS X,
iOS) scale to a certain size, but not more. I never really use this kind of
things, as scaling those form controls is an exercise in futility.
For Firefox, you can add `-moz-appearance: none;`. This will remove the
platform look and revert the widgets to some good old GFX thing from the year
1995 or so. It should scale though. For your Android browser (Chrome I guess?),
no clue unfortunately. Perhaps add an outline to make it more visible?
[type=checkbox], [type=radio] {
width: 1rem;
height: 1rem;
-moz-appearance: none;
outline: 2px dotted red; /* or anything to taste that might help */
}
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] How to: enlarge all content for accessibility
> On May 29, 2016, at 6:49 PM, william drescher <will...@techservsys.com> wrote:
>
> That works nicely except the radio buttons stay small.
Try setting width and height on those:
[type=checkbox], [type=radio] { width: 1rem; height: 1rem; }
Or something like that - adjust to taste and needs, etc.
Bare in mind that the look of those things is actually an image.
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] How to: enlarge all content for accessibility
> On May 28, 2016, at 7:38 PM, william drescher <will...@techservsys.com> wrote:
>
> My wife is vision impaired. I am writing a web application for her. How can
> I style the page so it displays at 300%. I can increase the fontsize, but
> then it does not increase the size of the form elements. I want to increase
> everything.
I would start with:
html, button, input, select, textarea { font-size: 3rem; }
then see if you need further adjustment to form controls (such as padding,
border, …)
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] Design Resolution
> On May 15, 2016, at 8:52 PM, JW <l...@sodesires.com> wrote: > > What's the standard design resolution for web nowadays? I tried using 1400px > with and it came up too big. Fluid: from 250px to infinity (in practice that mean something of a maximum width of 1350px for us) 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] Direction Blur
> On May 7, 2016, at 12:54 PM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > I think he is looking for this one. > > https://msdn.microsoft.com/en-us/library/ms532866(v=vs.85).aspx But that is still a MS-only filter, and I suspect the same warning as my previous message will apply – that is: those filters only work up to IE 9 and maybe IE10 & IE11 in some obscure back compete mode. They won’t work in Edge. 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] Direction Blur
> On May 7, 2016, at 11:49 AM, Karl DeSaulniers <k...@designdrumm.com> wrote:
>
> Microsoft filter blur angle
LOL - from the MS page:
https://msdn.microsoft.com/en-us/library/ms532979(v=vs.85).aspx
> This topic documents a feature of Visual Filters and Transitions, which is
> deprecated as of Windows Internet Explorer 9
-
> On May 7, 2016, at 8:45 AM, Crest Christopher <crestchristop...@gmail.com>
> wrote:
>
> Looking for a way to control the blur direction as in the filter:blur
> property ? By default the blur filter applies and even blur, if I could
> extract the blur from filter in the form of a css property I could use skew
> to do the direction ?
A decent search engine would bring you the relevant MDN and the inevitable
CSS-tricks articles near the top.
Anyway, the purely CSS filter ( E { filter: blur() } ) only accepts one
parameter.
You could try using the SVG filter which accepts 2 parameters (browser support
is more limited, check caniuse.com). Don’t know what the result would be
though, I’ve never used it so far.
see:
https://drafts.fxtf.org/filters/#blurEquivalent
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 ?
> On Apr 5, 2016, at 04:22, Crest Christopher <crestchristop...@gmail.com>
> 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] syntax: attribute selector on linked image
> On Mar 25, 2016, at 01:56, Angela French <afre...@sbctc.edu> wrote:
>
> I am trying to write CSS that will apply top margin on an image that is used
> as a back arrow button. The generated html is as follows:
>
>
>
> src="http://www.trumba.com/i/DgC4zgBAwusa93o2xKoNIHtu.gif?color=%2308799f;>
>
> I tried writing the CSS as:
>
> a[title="Back to Previous View"] img{
> display:block;
> margin-top:20px;
> background-color:pink; /*test*/
> }
>
> Unfortunately, I'm seeing no effect. Is my syntax incorrect, or am I trying
> to do something that is not possible?
Your syntax is correct (given the HTML markup you quoted). If you see no
effect:
1/ is your image transparent? otherwise you won’t see the background-color.The
`outline` property is your friend for debugging purposes.
img { outline: 3px solid red; } /* or lime or cyan or fuchsia - any of those
highly visible colours are very useful */
2/ your image, although set to `display:block`, is nested inside inline
elements, inside a `td`. The margin may have no visible effect due to that –
depending on how the other elements are styled.
3/ anything in the stylesheet that could possibly override your styling? check
with the developer tools in your browser what styling is actually applied.
> I also tried targeting the the image is in and applying padding to the
> cell like this:
>
> td < a[title="Back to Previous View"] img{
there is no such thing a '<' selector.
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] polyfill for 2d transforms iOS 7.x
> On Feb 28, 2016, at 13:47, Crest Christopher <crestchristop...@gmail.com> > wrote: > > I'm hoping there is a polypill for css3 2d transforms on this version of > iOS, once again if it's relevant ? You don’t give much details, but… you do realise, I hope, that MobileSafari running on iOS 7.x does support css transforms just fine —natively!—. You need to use the -webkit- prefix though. Apple’s Safari Team invented the whole damn thing. 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] Site navigation with dropdown submenus
> On Feb 2, 2016, at 02:41, D'Arcy J.M. Cain <da...@vybenetworks.com> wrote: > > Check sites that do what you want. http://www.VybeNetworks.com/ is an > example of CSS only drop down menus with sub-menus. View the source to > see how it is done. It's actually pretty simple. Have you tried navigating your page with the keyboard? Hint: you can’t go anywhere… And I have serious doubts about how usable that is for people using assistive technology (screen readers and the like). CSS-only menus are really not a good solution. For simple menus, I use http://responsive-nav.com, for more complex mess, with dropdown etc, I use the bootstrap menu. http://getbootstrap.com/customize/ and check only the dropdown menu + collapse, and forget about all their CSS. Both include the necessary machinery for aria-* attributes. 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] New website
> On Jan 30, 2016, at 13:00, Karl DeSaulniers <k...@designdrumm.com> wrote: > > however I was told to split > the css files up so there was less code to load and less load time. Oh, no, I don’t think so, particularly as you load all stylesheets for everybody. You could eventually split them up based on media queries, but otherwise there is little or no benefit. e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Something more you can do: minify your stylesheet(s). The browser/end user doesn’t need all your comments… And it does make a difference. I have a project under development, the stylesheet is about 135Kb; minified it is reduced to 75Kb, and then Gzip will bring it down to something like 40Kb. That applies to JS feels as well, btw. I use https://github.com/jakubpawlowicz/clean-css for that. There is an online version here: http://gpbmike.github.io/refresh-sf/ 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] New website
> On Jan 30, 2016, at 11:49, Karl DeSaulniers <k...@designdrumm.com> wrote: > > I would really appreciate feedback from you guys on this WordPress website I > just finished. It "should" be responsive on most if not all screens and work > on old IEs as well. > Any tips for SEO would be great, but OT for this list, so send off-list if > you feel obliged. My SEO foo is rookie at best. Not sure how it works on > assisted devices, hoping it does. > > I am actually excited to share, so If you run into any snags, let me know if > you would be so kind, but over all, what do you think? :) > TIA > > http://tpsautoshippers.com You really should look into the network performance. The site loaded quite slowly here (Japan, on a 1Gps pipe, Safari 9.0). Crunch your images with Imageoptim [1]. Gzip your stylesheets [2]. Merge you stylesheets. I didn’t run into particular issues otherwise. Listen — with the proverbial big grain of salt — to Google Page speed insights https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Ftpsautoshippers.com [1] I took this image: http://tpsautoshippers.com/wp-content/uploads/2015/12/DomesticDelivery_slide2-1600x569.jpg?1454124914409, and ImageOptim crunched it from 214Kb to 199Kb (that is 7%). [2] example: http://www.whatsmyip.org/http-compression-test/?url=aHR0cDovL3Rwc2F1dG9zaGlwcGVycy5jb20vd3AtY29udGVudC90aGVtZXMvR2FyYWdlL3N0eWxlLmNzcw== 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] styles for hover effects and touch
> On Jan 10, 2016, at 01:46, Isabel Santos <unboun...@gmail.com> wrote:
>
> Eventually, for newer browsers you could use the css feature query
> (@supports),
> for a deeper css control, but I'm not sure how.
You can’t use the @supports feature query in this case! It detects whether a
browser actually supports a combination of `property:value`, for example:
@supports { display: flex; } { E {property:value} }
but `hover` is a selector, not a property or value.
Interaction media queries [1] is the way to go, eventually (but what would
happen on a touch device with a mouse attached, such as the latest Microsoft
tablets, or the iPad Pro ?).
@media (pointer:fine) { /* for devices with a mouse or trackpad */
button:hover, input[type="button"]:hover { background: yellow; color:
red; }
}
That is supported by the current crop of browsers, except Firefox (check
Caniuse.com).
For Firefox you can work around (partly) by repeating your above selectors
inside an @supports query]
@supports (-moz-appearance: none) {}
but that would trigger on (handheld, touch) Android devices as well.
> On Jan 9, 2016, at 00:49, Tom Livingston <tom...@gmail.com> wrote:
>
> Is it just a matter of moving the hover styles to
> a wider breakpoint?
That won't work, except if you also exclude a lot of common window sizes for
desktop browsers . Have you checked the CSS-screen size of, e.g. an iPad Pro?
(hint: 1024 by 1327px or thereabout); my browser windows are rarely wider that
1100px, esp on the MBA.
———
I rarely, if ever, use :hover effects (and when I do it is usually something
very discreet) so I haven’t really thought about this. On top of this, in most
cases, when the user presses / taps a button, either the user is taken to
another screen, or something happens (JS at work) within the same screen that
shifts the focus away from the button, in which case that persistent `:hover`
state is removed. It may still persist when the user uses the back button, in
which case, you could consider it a bonus :-) — an indication to the user what
the last thing he/she did on that page / screen.
I do consider it a bit of a bug that it is the `:hover` state that triggers all
this, not the `:focus` or `:active` state. Or maybe is yet another unfortunate
side effect of web developers doing stupid things such as CSS-only menus, where
mobile browsers then need to try to be ”web compatible”.
[1] http://www.w3.org/TR/mediaqueries-4/#mf-interaction
check this article by Patrick Lauke:
https://dev.opera.com/articles/media-features/
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] Formatting Superscripts (and subscripts)
> On Dec 27, 2015, at 06:13, Jeff Zeitlin <edi...@freelancetraveller.com> wrote:
>
> Going over some of my sites pages, I've noticed that when a line of text
> has a superscript in is, it seems to open the space between it and the
> line above a little. What I'm wondering is simple: How do I prevent
> this?
This is what I use:
> sub, sup {
> position: relative;
> vertical-align: baseline;
> }
>
> sub {
> bottom: -.25em;
> }
> sup {
> top: -.3em;
> }
Control the font-size to your taste (typically it should be a little smaller
than the main text).
(ideally I’d use `ex` units for `top` and `bottom`, but support for that is
_still_ spotty)
> On Dec 27, 2015, at 06:17, Tom Livingston <tom...@gmail.com> wrote:
>
> Google 'normalize.css'. There are styles in this for sup and sub. I'm not
> in a position to copy/paste the relevant bits, sorry.
I’ve always wondered why that stylesheet sets the line-height on the `sub` and
`sup` to `0`. I never had a problem with letting the line-height inherit from
the parent element (default behaviour).
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] [ADMIN] Hello, my friends, hello
> On Dec 24, 2015, at 05:35, Eric A. Meyer <e...@meyerweb.com> wrote: > > This hiatus and its lack of observance has led me to wonder about the utility > of css-discuss, and whether it needs to continue. As an early subscriber (my archives go back to early February 2002!), I would be sad to see this list disappear. The community is immensely more valuable and friendly than StackOverflow and the like. That said, I understand your reasons for being not much more than lukewarm towards continuing to maintain this list alive. Traffic has been slowing down over the past 18 months or so. Stackoverflow, Github and some forums have a better perceived value to people. Option 2 is a variant on an hypothetical option 4 voiced by some: keep the list alive, but under new management. Ok, maybe ? Does such a potential saviour exist? Your option 3 would be … interesting. Over the past few months I’ve come to some realisation that there is a need for an alternative space (to www-style) to discuss the deeper issues of CSS. I don’t really now (yet ?) what that should be and how to bring it to life, though. At any rate, thank you, Eric, for starting this run and maintaining it over the years! 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] iPhone difference 5 & 5c ?
> On Oct 14, 2015, at 07:51, Crest Christopher <crestchristop...@gmail.com> > wrote: > > True, how does one compare how Chrome emulates a device ? Don’t trust the Chrome emulator. The rendering of the page you see there is based on the Blink rendering engine, which nowadays is quite different from the Webkit rendering engine. The only thing where that emulator is useful is evaluating how your page might look like given a viewport of xxx px by yyy px. 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] iPhone difference 5 & 5c ?
> On Oct 14, 2015, at 07:21, Crest Christopher <crestchristop...@gmail.com> > wrote: > > I've done some preview on iPhone5c and a iPhone5 the specs are the same, why > is my footer menu rendering different, makes no sense ? Am I right in > assuming that there isn't a difference and it's the web app to which I'm > using ? The obvious question of course : do those devices run the same OS ? Same version of Mobile Safari (which is basically the same question)? 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] font-family declaring
> On Oct 1, 2015, at 01:12, Crest Christopher <crestchristop...@gmail.com> > wrote: > > One must use @font-face even if using fonts that are installed on the users > machine and to which are local ? There is *never* a *must*. Using @font-face is an option among many (including not declaring any font-family. > How do I find what fonts are pre-installed on most mobile / tablet / desktops > ? Have you tried $search_engine_of_your_choice? Sometimes that is useful technology. “font-list iOS”, “installed fonts Android”, etc, and any variation thereof. 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] font-family declaring
> On Oct 1, 2015, at 22:56, Tom Livingston <tom...@gmail.com> wrote: > > He means Google it. Or DuckDuckGo it, or Bing it, or Yahoo it, or Yandex it, or… Let’s propagate a new verb: to searchengine. (darn, I didn’t think “$search_engine_of_your_choice“ would be so hard to understand) 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] font-family declaring
> On Sep 29, 2015, at 12:27, Crest Christopher <crestchristop...@gmail.com>
> wrote:
>
> When using @font-family is it placed within the rule as such;
>
> {@font-family {font-family properties} } ?
Hmm, there is no such thing as a @font-family at-rule…
Do you mean the font-family property, which takes a list of font-families as
value and that you can declare on any selector you want.
Or do you mean the @font-face at-rule, which is used to link to a downloadable
font ? You don't declare that on any element or selector. It is a sort of
container block that at minimum contains a source for the font and a descriptor
@font-face {
font-family: 'my ugly font'; /* descriptor */
src: url(/path/to/my-ugly-font.woff) format('woff');
}
(I usually insert that near the top of my stylesheets, but it can go any place)
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] trouble with background-image in p::after
> On Sep 30, 2015, at 08:39, Angela French <afre...@sbctc.edu> wrote:
>
> I have the CSS and html below , but it is not displaying the image in the
> rendered page. The path to the image is correct and the image is there. Is
> my syntax correct in the use of the ::after?
>
> …
>
> p.studentredirect::after{
>background-image:url("/_resources/images/circlearrow.gif")
> right no-repeat;
> }
For the ::after pseudo-element to do anything (that is: to appear) you need as
a minimum to specify the `content` property:
E::after {
content: '';
}
With that you'll have an ::after element that is still empty and sized to 0 x
0px but it 'exists' as far as your CSS is concerned. Give it some width and
height, specify the display property (`inline` being the initial value).
as it is, your `p.studentredirect::after` is empty and doesn't exist.
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] pseudo-class :not Selector
> On Sep 25, 2015, at 07:06, Marie-Ange Demeulemeester
> <marie.demeulemees...@gmail.com> wrote:
>
> I can’t succeed to give properties on:
>
>
>
> html div.x select{...}
>
> And not to
>
> html.linux.safari div.x select{...}
>
>
>
> This works:
>
> html:not(linux) div.x select{...}
>
> html:not(safari) div.x select{…}
Are you sure that “works”? It is a bit a non-sensical selector in an HTML
context.
This translates as: “ select any select descendant of a div with class 'x' that
is a descendant of a html element which is not a linux element”
Try this to translate your selectors in some human readable language:
http://gallery.theopalgroup.com/selectoracle/
You probably mean:
html:not(.linux) div.x select {} /* note the leading period before the `linux`
*/
>
> but I need both conditions
>
> This doesn’t work:
>
> html:not(linux.safari) div.x select{…}
that won't work per CSS3 selectors, even assuming a leading period before the
`linux`. You can't chain multiple classes inside the :not() pseudo-class.
this should work:
html:not(.linux):not(.safari) div.x select {}
> (Side info: I need this to solve the bug in android stock browsers with
> responsive design. Problem; When you add a border or background to a
> select, the arrow and border anymore on that dropdown box are not visible
> anymore.)
See Tom's answer.
Styling select widgets in blink/webkit browsers is trivial, but you have to
style the whole thing yourself.
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] Multiple Opacity
> On Sep 22, 2015, at 10:55, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Make the PNGs translucent? Yes, of course… But in the context of this list, I always assume a CSS way of doing things. 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] Multiple Opacity
> On Sep 22, 2015, at 10:43, Crest Christopher <crestchristop...@gmail.com> > wrote: > > You can have multiple background-positions for background-images, but can > have multiple opacity for multiple backgrounds ? You do know that the `opacity` CSS property doesn't apply to background(s) only but to the whole element itself, do you? Now, if you mean, can I have different translucency applied to background-images, the answer is currently no. The are ideas under discussion to make that possible but currently nothing is really specced, let alone implemented in any browser… 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 for Android only?
> 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] Centered image
On Aug 8, 2015, at 15:10, Martin Skjöldebrand mar...@skjoldebrand.eu wrote:
As can be seen here: www.tyresoschack.se there is an overlay image that seeks
to explain how to get the menu on the site. It's only displayed on the first
visit.
….
However as you can see the image is centered on the page rather than left
aligned as it is here: https://demo.gavick.com/joomla25/writer/
I've been fiddling with the code, but only managed to make the situation
worse
... Does anyone have an idea what can make the image left-aligned? I shold
also mention that the image itself is the same width on the two sites.
Take a good look at the whole background rule:
yours:
background: rgba(0,0,0,.75)
url('/joomla25/writer/templates/gk_writer/images/overlay-img.png') no-repeat
100px center;
the tyresö schackklubb site:
background: url(overlay-img.png) no-repeat scroll 87% 30px rgba(0, 0, 0,
0.75);
The background-position is different. Yours ask fo putting the image 100px from
the left, centred vertically. Theirs ask to put the image 30px from the top
and, from the left, match the 87% point of the image with the 87% point of the
container.
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] centering issue
On Aug 8, 2015, at 01:13, Tom Livingston tom...@gmail.com wrote: OK, well after some more poking around, width: inherit; on the 'a' fixed my issue. Thanks if you looked… But do you know / understand why ? – it is a good thinking exercise in the summer heat :-) Correct answer wins a cookie and a glass of cold water with one ice cube. 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] centering issue
On Aug 8, 2015, at 22:36, Tom Livingston tom...@gmail.com wrote:
Because 100% couldn't be calculated because the parent was a percentage?
'100% of what' kind of thing?
Close… :-)
The physical parent's width is known and can be computed, no problem (parent in
the source; in this case the `li`); in “normal” circumstances, the percentage
width on the child can be computed. However, in your case, there are some more
(virtual) elements between the `a` and the `li`.
from your original message
a{
display: table-cell; this
Per css 2.1:17.2.1, browsers will generate the missing elements as anonymous
table objects (tr,tbodytable); that table element has a width of `auto`
- for tables that means the width depends on the width of the cell(s). Then the
percentage width on the `a` cannot be resolved (computed); it is undefined -
see CSS2.1:10.2.
But if you set the width of the `a` to `inherit`, then yes everything falls in
place, as the width of the `li` is already computed, and that is the value that
cascades through.
(hope this is readable English)
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] Rules for making content hidden and visually hidden
On Aug 4, 2015, at 19:03, Rick Lecoat li...@sharkattack.co.uk wrote: Jim Thatcher (who, it might be supposed, knows a thing or two about accessibility) is of the view that there is almost no reason to make hidden content available to screenreaders: http://alistapart.com/comments/now-you-see-me#330917 And in fact this returns to a question I've sought an answer to on previous occasions but never got a definitive answer to: Do people using screenreaders (I'm going to just refer to them as 'blind users' for the sake of brevity, although I realise that it's a far broader church than that) WANT to have immediate access to content that is hidden by interface -- eg. in javascript-powered tabs, or in an accordion -- or would they rather that it is hidden until their screenreader makes it available? Marco Zehe, in this article: https://www.marcozehe.de/2012/04/24/hiding-content-untangled-hiding-vs-moving-out-of-the-visible-viewport/ seems to imply the latter, but is he the only one? Nope, Marco is right (and Jim). If you hide something, hide it for everybody. Use the whole machinery provided by aria-* attributes to clarify improve the experience for AT users. That might require using bits of JS to toggle attribute values, but AT users will have a much better experience. After all, what is “noise” on a page to a visual user (until it is needed), is equally ( or even more so) “noise” to an AT user. And even Jim Thatcher’s examples that could be left visible to AT users only should, imho, benefit from using aria attributes instead. Bear in mind that he wrote that comment 4 years ago; support of aria has improved immensely since then. And —cela va de soi— there are always exceptions that confirm the rule :-) 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] Rules for making content hidden and visually hidden
On Aug 4, 2015, at 17:29, Rick Lecoat li...@sharkattack.co.uk wrote:
It is, unless you want to hide content from sighted users whilst still making
it available to assistive technologies. Examples: a 'Search' label beside a
search field, or 'skip to main content' links.
Fwiw, I use those (complicated) hide-from-sighted-users-but-not-from-AT {} less
and less these days, in favour of aria-label=. In the example you give, you
can omit the `label` from the search form, and just use input type=search
aria-label=search this siteinput type=submit value=search (but all
depends on which browsers you need to support, goes without saying). As for the
‘skip to main content’ links, should that really be hidden from some users? A
sighted user navigating the page with the keyboard might benefit form seeing
that link…
And fwiw2, I don’t think you need those !important declarations in your rules.
Might simplify overriding them if needed. Of course, mind the specificity etc…
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] Rules for making content hidden and visually hidden
On Aug 4, 2015, at 18:02, Rick Lecoat li...@sharkattack.co.uk wrote: And I've just discovered now that clip is deprecated, so I should probably use clip-path instead (with clip as a browser fallback?). Browser support for clip-path is pretty weak, atm. Safari 8, yes, Firefox no, IE no (but Edge?), Chrome unknown. Deprecated doesn’t mean that browsers will drop support for a feature/property/value soon, if ever. 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] vertical-align baseline issue?
On Jul 30, 2015, at 03:33, Angela French afre...@sbctc.edu wrote:
I have an h1 with a span applied to the first three words to make them
smaller. I want the bottom of the text to line up those with the rest of the
heading and it is not.
Html: h1span class=policyManualFirstLineSBCTC Policy Manual/span
Chapter 4: Instructional Program and Course Development/h1
CSS:
h1 span.policyManualFirstLine
{
font-size:.65em;
vertical-align:baseline!important; /* tried this, no effect */
padding-bottom:0; /* tried this, no effect */
}
Is what I'm looking for possible? Am I not doing it right?
Can you provide a test case illustrating your problem? Failing that, you'll
need to provide more context…
By default your span *should* rest on the baseline of its parent element,
unless there are rules somewhere that prevents it.
Look at this test case, the span rests on the baseline:
http://dev.l-c-n.com/_junk/cssd-af.html
(the red line indicates the baseline)
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] Sidebar height with list filter
Le 1 juil. 2015 à 05:16, J.C. Berry jcharlesbe...@gmail.com a écrit : I have an issue with a set of checkbox filters in a sidebar that has to expand it height based on what the user selects. Here is a simple layout (the site is on dev): SB Div1 Div2 Div 3 SB Div4 Div5 Div 6 SB Div7 SB SB FOOTER FOOTER FOOTER So the checkbox filters are in the sidebar (SB) and the Divs are added or removed based on choice of type of Div. I need the SB to expand as needed. Possible? Your sidebar should auto-magically grow with the amount of content it contains, no? Unless, that is, you set `height` or `max-height`. I suspect your problem might be that your `footer` doesn’t move (lower) when you add content to your sidebar. That will depend on how you coded your whole page. Hard to say without at least a minimal testcase. 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
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] review please - an existing site made mobile
Le 6 juin 2015 à 21:01, Erik Visser e...@erikvisser.net a écrit : Only potential problem I can see, is that text alongside floating images may break up in not so nice ways as space narrows... Screenshot: http://www.gunlaug.com/contents/imagefolders/extra/scr-utr.png Yes, that's what i saw too, and i did not know what to do about it. Any suggestions? What I usually do for narrow viewports ( let’s say 480px) is set the images to `display: block, margin: 0 auto; float: none`, and let the text “jump” over the image. Unless the images are really small, things like icons or thumbnails 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 masking
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] BG Repeat one direction ?
Le 27 mai 2015 à 08:28, Crest Christopher crestchristop...@gmail.com a écrit : How can I background-repeat in one direction ? 1st hit: https://duckduckgo.com/?q=MDN+background-repeatt=osx 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] Block out Background image with mask !
Le 24 mai 2015 à 10:08, Crest Christopher crestchristop...@gmail.com a écrit : background-image(); mask-image() alpha/luminance; That is how I have the rule defined. 1. Not to be difficult, but a test case is *always* useful … 2. http://caniuse.com/#search=mask (and also click on the resources tab at the bottom). 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] help with responsive menu dropdown
Le 21 mai 2015 à 04:06, Chris Kavinsky ckavin...@gmail.com a écrit :
I'm trying to retrofit an existing site that's using a horizontal
navigation menu with dropdowns. The problem I'm having is getting the menu
to appear on:click when the screen size is smaller. Its doing it entirely
using css. I created a static version before moving it to the wordpress
site, and it worked there. However, its not working on wordpress. Does
anything jump out to anyone as to what the problem is?
here's the model I grabbed the css code from:
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
here's the live site I'm working on:
http://www.aircompressors.com/
Your “button”-link points to a #nav as target. However there is no element with
id=nav in your code, that I could find. Do you mean to point to the element
with ID=primary-navigation? if so, you should correct the “href” in your button
link to point to that (a href=primary-navigation), and then make sure your
stylesheet references that.
#primary-navigation:target { /* do something */ }
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] Flex items lose some padding in Firefox
Le 3 mai 2015 à 01:02, David Hucklesby huckle...@gmail.com a écrit : The answer is here: https://drafts.csswg.org/css-flexbox/#item-margins [quote] Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block. [/quote] Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply the padding. FWIW - the discussion on this very subject in the CSS working group is not settled! They are asking feedback from stylesheet authors: http://www.w3.org/blog/CSS/2015/05/05/flexbox-percentage-margins/ 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] Flex items lose some padding in Firefox
Le 4 mai 2015 à 03:21, David Hucklesby huckle...@gmail.com a écrit :
What issue (and which old Android) are you seeing? And, you lock out IE 10/11
as well?
http://caniuse.com/#feat=flexbox
I’m looking at canIuse, which notes that Android 4.2−4.3 don’t support
flex-wrap.
But is that always true? I have here an older Sony Xperia phone - very popular
here in Jpn that appears to support flex-wrap (OK, via the shorthand -
`flex-flow: row wrap;`) just fine. According to my son, who got the device for
free and set it up (have to leave all those complicated things to the younger
generation…), it runs the default system + browser (and that thing can’t seem
to access the G.playstore and even less the Docomo system server). Thing is old
enough not to run Android 4.4.
But I don’t see that as an issue, as I use inline-blocks as a base
(with alignment impossible with floats). But, unless I minimize the HTML, none
of the usual hacks for getting rid of extra gaps seem to work reliably
cross-browser. Hence my interest in using flex-box. :)
Right, flexbox is pretty good for that kind of things, and more human readable
than the next layout thing some people are excited about (grid layout). And
support is good enough across the board to use it extensively (IE8 is the big
head-ache nowadays).
PS - working with inline-block for that grid layout you use in this thread:
.wrap { font-size: 0rem; font-family: monospace }
.wrap .kid { display: inline-block; font-size: 1rem /*to taste*/;
font-family: /*whatever*/, sans-serif; box-sizing: border-box; width: xxx%;
vertical-align: top; }
works pretty well for me. Need a bit of hacking for IE 8 though.
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] Flex items lose some padding in Firefox
Le 3 mai 2015 à 01:02, David Hucklesby huckle...@gmail.com a écrit : Ah, yes. Did not know about that. Confused by the fact Chrome *does* apply the padding. Yes, Chrome / Blink (and Webkit) is not spec compliant for this (and many other things flexbox related). They unprefixed the flexbox code when they forked from Webkit) in a fit of holier-than-thou mentality. PS - don’t forget to add the -webkit- prefixed properties / values for Safari. Actually am applying this on top of inline-blocks via @supports ( flex-wrap: wrap ) to prevent old Android versions using it. So Safari is locked out anyway. What issue (and which old Android) are you seeing? And, you lock out IE 10/11 as well? 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] Flex items lose some padding in Firefox
Le 2 mai 2015 à 06:50, David Hucklesby huckle...@gmail.com a écrit : This is the bare bones of a grid of thumbnails. Works okay in Opera and Chrome, but the top and bottom padding disappear in Firefox: http://codepen.io/hucklesby/pen/MwwXWP FWIW this does not happen in a float or inline-block layout. The answer is here: https://drafts.csswg.org/css-flexbox/#item-margins [quote] Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block. [/quote] given that the height of your flex items (figure) is auto, the vertical padding computes to 0. PS - don’t forget to add the -webkit- prefixed properties / values for Safari. 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] MQ syntax
Le 2 mai 2015 à 04:27, Tom Livingston tom...@gmail.com a écrit :
Drawing a blank on this. Is this correct syntax for this MQ?
@media only screen and (min-width: 600px) and
(-webkit-min-device-pixel-ratio: 1.5), (min-width: 600px) and
(min-resolution: 144dpi){ rules here }
Nothing wrong with that, but the 2 sets are not equal:
* for webkit/blink based browsers 3 conditions must be true:
'only screen' + 'min-width' + ' -webkit-min-device-pixel-ratio'
* for other browsers (and webkit/blink based browsers will also understand
this) there are only 2 conditions that must be true:
'min-width' + 'min-resolution'
I'm using this in picturefill (ver 1.x) and I think it's causing an
error and need another pair of eyes. Picturefill use is:
span class=d-2x data-src=img/logo2x.png data-media=(min-width:
600px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 600px)
and (min-resolution: 144dpi)/span
IDKN ? what error do you get? a test case would be useful…
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] which media queries
Le 26 avr. 2015 à 09:32, Erik Visser e...@erikvisser.net a écrit :
@media screen and (max-width: 760px) {
@media screen and (max-width : 960px) {
@media screen and (max-width: 1152px) {
@media screen and (-webkit-min-device-pixel-ratio : 1.5), screen and
(min-device-pixel-ratio : 1.5) {
Will this do for most commonly used mobile devices?
Here in Holland these will be iPads and the majority of mobile phones from
samsung and apple?
If not, which devices (screen-sizes) should I address too?
Whatever fits _your_ design / layout / content (particularly as you’re
retrofitting an existing site).
Open your site in a desktop browser, then start narrowing the window and see at
which width your site falls apart or becomes too crammed to read or use nicely,
check the width of the window (e.g. use the developer tools in your browser to
check the computed width of the root element aka html`); there you have a
(first) break point at which you want to reorganise your layout a little
(lots?). Continue to narrow down your window and see at which point more
shuffling is needed – a second breakpoint. You can also use MQ’s to target
(very) large window widths.
In other words. Don’t focus too much on existing devices, see how your site
works at a variety of window widths (viewport widths).
Note - the 4th MQ in your list above is priory aimed at detecting hiDPI (aka
retina) screen resolution; mostly useful for loading higher res images.
PS - don’t forget to include a viewport meta element, else mobile devices /
tablets will default to a viewport width around 980px (iOS, other OS have
similar values).
meta name=viewport content=width=device-width, initial-scale=1
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/
