Re: [Xsltforms-support] new beta release testing - possible styling bug - display:block
Brought to you by:
alain-couthures
Menu
▾
▴
Re: [Xsltforms-support] new beta release testing - possible styling bug - display:block
|
From: Alain C. <ala...@ag...> - 2020-05-10 19:29:09
|
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
In previous XSLTForms release, all controls were disabled, with a CSS class, before evaluation to limit flickering when building, especially sensible for switch/case with just one selected case.
</div>
<div>
<br>
</div>
<div>
This release does not use any CSS class but extra attributes which is lighter for Javascript processing.
</div>
<div>
<br>
</div>
<div>
The XSLT transformation is not even required if an author directly uses the generated HTML5 notation. In this case, <xforms-input xf-ref="a"><xforms-label>A: </xforms-label></xforms-input> should not be displayed until the extra xf-bound attribute is added accordingly.
</div>
<div>
<br>
</div>
<div>
It sounds then impossible to set the default to visible, doesn't it?
</div>
<div>
<br>
</div>
<div>
--Alain
</div>
<blockquote type="cite">
Le 10 mai 2020 à 19:33, Steven Pemberton <ste...@cw...> a écrit :
<br>
<br>
<div>
The current stylesheet sets everything to display: none, and then adds the cases when it is not display: none.
</div>
<div>
<br>
</div>
<div>
I think the cure is to do it the other way round: set the default to visible (inline/block) for those elements where this makes sense (like input, but not the actions, model etc.) and then specify explicitly the cases where display is none.
</div>
<div>
<br>
</div>
<div>
In that way, user added CSS (which is only interested in when the elements are visible) can override the default case. The long, specific selectors for display: none will never need to be overridden.
</div>
<div>
<br>
</div>
<div>
Steven
</div>
<div>
<br>
</div>
<div>
On Sun, 10 May 2020 16:06:25 +0200, Alain Couthures <ala...@ag...> wrote:
<br>
</div>
<br>
<blockquote>
<div>
Maybe it could be better if the XSLT stylesheet could read some option to generate a reference to another CSS stylesheet (instead of xsltforms.css).
</div>
<div>
<br>
</div>
<div>
What do you think?
</div>
<div>
<br>
</div>
<div>
--Alain
</div>
<blockquote type="cite">
Le 10 mai 2020 à 12:41, Steven Pemberton <ste...@cw...> a écrit :
<br>
<br>
<div>
I have this problem too, and I'm trying to trace how to fix it.
</div>
<div>
<br>
</div>
<div>
The xsltforms css has
<span style="font-family: DejaVu Sans Mono;"> rules like:</span>
</div>
<div>
<br>
</div>
<div>
xforms-input[xf-bound]:not([xf-notrelevant]) {display: inline}
</div>
<div>
<br>
</div>
<div>
which have very high 'specificity'. The CSS1 spec* says:
</div>
<div>
<br>
</div>
<div>
* Find all declarations that apply to the element/property in question. Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used. If there is no inherited value (this is the case for the 'HTML' element and for properties that do not inherit), the initial value is used.
<br>* Sort the declarations by explicit weight: declarations marked '!important' carry more weight than unmarked (normal) declarations.
<br>* Sort by origin: the author's style sheets override the reader's style sheet which override the UA's default values. An imported style sheet has the same origin as the style sheet from which it is imported.
<br>* Sort by specificity of selector: more specific selectors will override more general ones. To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity.
</div>
<div>
<br>
</div>
<div>
"An imported style sheet has the same origin as the style sheet from which it is imported." means, I think, that the xsltforms.css has the same importance as the style in the form itself.
</div>
<div>
<br>
</div>
<div>
Using !important is in general a poor solution, because it overrides other rules in your own styling, though it would often work.
</div>
<div>
<br>
</div>
<div>
I think, strictly speaking, you have to use the same selector or a more specific one than in the xsltforms.css
</div>
<div>
<br>
</div>
<div>
So to change the display value, you have to use
</div>
<div>
<br>
</div>
<div>
<div>
xforms-input[xf-bound]:not([xf-notrelevant]) {display: block}
</div>
<div>
<br>
</div>
<div>
I will be experimenting with the xsltforms.css in the coming weeks to see if we can improve on this situation, because it was easier to do in the previous xsltforms.
</div>
<div>
<br>
</div>
<div>
Best wishes,
</div>
<div>
<br>
</div>
<div>
Steven
</div>
<div>
<br>
</div>
<div>
* The latest CSS spec is harder to read. Check it for yourself at https://www.w3.org/TR/selectors/#specificity
</div>
<div>
<br>
</div>
<div>
A rule of relevance is:
</div>
<div>
<br>
</div>
<div>
The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.
</div>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
On Sun, 10 May 2020 09:57:26 +0200, Alain Couthures <ala...@ag...> wrote:
<br>
</div>
<br>
<blockquote>
<div>
Hello Habs,
</div>
<div>
<br>
</div>
<div>
Sorry, I am not a CSS expert but I think that, in such as situation, you have to add !important in your own CSS rule to override the default behaviour.
</div>
<div>
<br>
</div>
<div>
Thank you for your feedback!
</div>
<div>
<br>
</div>
<div>
--Alain
</div>
<blockquote type="cite">
<div>
Le 22 avril 2020 à 15:03, Habs <
<a href="mailto:ge...@us...">ge...@us...</a>> a écrit :
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
Hello all :)
</div>
<div>
<br>
</div>
<div>
Using the new beta from here, www.agencexml.com/1.5beta/xsltforms.zip :
</div>
<div>
<br>
</div>
<div>
xf:input ( xforms-input when using a css inspecting tool ) defaults to
</div>
<div>
'display:inline'.
</div>
<div>
<br>
</div>
<div>
I can only seem to style a xf:input as 'display:block' by using an
</div>
<div>
inline style on the element
</div>
<div>
<br>
</div>
<div>
ie. <xf:input ... style="display: block">
</div>
<div>
<br>
</div>
<div>
and not in a external ref'd style sheet, or a style section within 'head',
</div>
<div>
from where all other styling on the element appears to apply without
</div>
<div>
issue.
</div>
<div>
<br>
</div>
<div>
ie. xforms-input {display: block;}
</div>
<div>
<br>
</div>
<div>
Is it something I am getting wrong, or a bug, or ?
</div>
<div>
<br>
</div>
<div>
Thank you and regards
</div>
<div>
Habs
</div>
<div>
<br>
</div>
<div>
--- Sent using Alpine/Pine, probably the best MUA ---
</div>
<div>
<br>
</div>
<div>
<br>
</div>
<div>
_______________________________________________
</div>
<div>
Xsltforms-support mailing list
</div>
<div>
<a href="mailto:Xsl...@li...">Xsl...@li...</a>
</div>
<div>
<a href="https://lists.sourceforge.net/lists/listinfo/xsltforms-support" target="_blank" rel="noopener">https://lists.sourceforge.net/lists/listinfo/xsltforms-support</a>
</div>
</blockquote>
</blockquote>
<br>
<br>
<br>
</blockquote>
<div class="ox-16167616ac-default-style">
<br>
</div>
</blockquote>
<br>
<br>
<br>
</blockquote>
<div class="default-style">
<br>
</div>
</body>
</html>
|
