[TW5] CSS media queries not working

[Danielo Rodríguez]

Hello,

Could someone help my whi this media queries are not working? only the query for mobile works. But when I expand the window and width goes over 960 it does not 
apply the display none property.

Any clue? This worked previously, but it is nor working right now, and I can't find any difference.

/* STANDARD MEDIA MIN. 960px */
@media (min-width: 961) {
     /* TOP MENU */
     html .tw-topmenu {
            display: none;
     }
}

/* MOBILE MEDIA MAX. 960px */
@media (max-width: 960px) {
     html .tc-sidebar-header {
          padding: 45px 0 0 15px;
     }
     /* TOP MENU */
     html .tw-topmenu {
          padding : 0px 8px;
          overflow: hidden;
     }

html .tc-tiddler-controls button svg {
     height  : 1em;
}

}

[Danielo Rodríguez]

Here are two examples:

This one works as expected:

https://www.dropbox.com/s/g3xag85xky9looz/mobile_theme.htm?dl=0

This one does not:
https://www.dropbox.com/s/nzrvhoiudqiskk9/mobile_theme%20-%20Copy.htm?dl=0

I can't understand why. Both are 99% identical.

[Danielo Rodríguez]

Any CSS magician can help me?

[Tobias Beer]

Hi Danielo,

First of all, is it permissible to wrap any tiddler tagged $:/tagsStylesheet in <pre/>?

Semantically that seems quite odd, to say the least.

As to your problem, for reasons that I fail to understand, if I just put...

html .tw-topmenu {
     background : #ececec !important;
     height : 45px;
     margin : 0;
     position : fixed;
     top : 0;
     left  : 0;
     width : 100%;
     z-index: 100;
}

...into $:/_stylesheet/topmenu in either one, it works in the first but not in "copy". So, in fact, it's not that it's properly hidden in "copy" but rather never applied!

Also, in $:/_TopSideBar, I don' think you want to transclude that stylesheet tagged topmenu with the rest of the stuff, do you?

Now, here's the final "Aaaahhh, I knew it!"...

If I remove those awkward <pre></pre> tags from your StyleSheets, things are finally starting to work!

Best wishes, Tobias.

[Danielo Rodríguez]

Hello Tobias,

Thank you very much for your help. I will try your suggestions as soon as I have a computer (on my mobile it looks fine).

But, I don't understand this sentence :

Also, in $:/_TopSideBar, I don' think you want to transclude that stylesheet tagged topmenu with the rest of the stuff, do you?

What I'm transcluding where?

[Tobias Beer]

Hi Danielo,

 

> Also, in $:/_TopSideBar, I don' think you want to transclude that stylesheet tagged topmenu with the rest of the stuff, do you?  

 

What I'm transcluding where?

Take a look at that tiddler, it constructs your TopMenu via the list widget by iterating all items tagged topmenu... including that stylesheet... which surely isn't a component of your topmenu, or is it?

Best wishes, Tobias. 

[Danielo Rodríguez]

El lunes, 15 de diciembre de 2014 00:41:08 UTC+1, Tobias Beer escribió:

Take a look at that tiddler, it constructs your TopMenu via the list widget by iterating all items tagged topmenu... including that stylesheet... which surely isn't a component of your topmenu, or is it?

They have to be tagged topMenu and button.

I found where the problem is, but I don't understand the problem at all. It is the $:/_stylesheet/mobile/menu.css
There are some differences, but I don't understand why they make the hidden to not be applied. If I copy the original tiddler to the "copy" version it works as expected, even when the "copy" has a different structure.

Here is the diff of both files

https://www.diffchecker.com/zhmffj15

[Tobias Beer]

Hi Danielo,

 

They have to be tagged topMenu and button.

I knew, I wasn't looking close enough. ^_^

 

I found where the problem is, but I don't understand the problem at all. It is the $:/_stylesheet/mobile/menu.css
There are some differences, but I don't understand why they make the hidden to not be applied. If I copy the original tiddler to the "copy" version it works as expected, even when the "copy" has a different structure.

Allow me to ask again, is it and why would it be allowed to wrap a tiddler tagged $:/tags/Stylesheet in...

<pre>
.foo{}
</pre>

?

Removing those stops the stylesheet from breaking.

Best wishes, Tobias.

[Danielo Rodríguez]

Allow me to ask again,

As many times as you want
 

is it and why would it be allowed to wrap a tiddler tagged $:/tags/Stylesheet in...

<pre>
.foo{}
</pre>

?

Just for cosmetical representation.
 

Removing those stops the stylesheet from breaking.

It does not happens on my case. As I said, the problem got fixed changint the mentioned stylesheet to its old values. The awesome thing is that it still working even with a different structure. Currently I have this working with the <pre> tags, so I don't think it is any problem. Maybe Jeremy can confirm this.

[Tobias Beer]

Hi Danielo,

 

Just for cosmetical representation.

I sure understand that this is why you would do it ...but is that allowed? Where does it say so?

Removing those stops the stylesheet from breaking.

 

It does not happens on my case.

That sounds odd. It seems to do it for me.

Best wishes, Tobias. 

[Ton Gerner]

Hi Danielo, Tobias,

In the past I did use triple backticks in stylesheets and I asked also about the <pre> ... </pre>, see the thread [1]

Excerpts from this thread:

Jeremy (about text/css and triple backticks):

You should only store stylesheets as text/css if they don't contain any TW5 macros or transclusions. If you use transclusions and macros (like the stylesheets in the core themes), then it is perfectly OK to use triple backticks to mark sections that you want to exclude from wikification.

My question: Is it allowed to use <pre>...</pre> around the styles in the stylesheet while using txt/css as type?

Jeremy: No, you can't insert <pre> within the text of text/css tiddlers because the text within the tiddler is not subject to wiki processing. But the entire tiddler will be displayed in <pre> tags anyhow, because it's a text tiddler.

Cheers,

Ton

[1] https://groups.google.com/d/msg/tiddlywiki/UOBPRMjWbqU/XSY9M2fKRHsJ

[Tobias Beer]

Hi Ton,

 

Jeremy: No, you can't insert <pre> within the text of text/css tiddlers because the text within the tiddler is not subject to wiki processing. But the entire tiddler will be displayed in <pre> tags anyhow, because it's a text tiddler.

 

Still not convinced. Of course, when you put your css inside a pre it will be rendered like so. But that's not an answer as to how this affects applying it as a valid stylesheet.

What happens to those html elements in stylesheets? I can see how <<macro foo>> gets replaced before the styles are applied and then that's ok, but actual html markup within a <style>foo</style> block? That sounds just wrong. If `css comments` are allowed with backticks, then that would also require special handling by the core for stylesheet tiddlers... because you sure don't want backticks in your css declarations, when the actual commenting syntax is /* some comment in css */.

Best wishes, Tobias.

[Jeremy Ruston]

> Currently I have this working with the <pre> tags, so I don't think it is any problem. Maybe Jeremy can confirm this.

The thing to remember about CSS generation is that the process is to wikify the stylesheet tiddlers into a widget tree and then just extract the text to use as the raw CSS. So, any HTML tags are ignored. This allows us to use (eg) the reveal widget without the HTML elements that it generates affecting the output.

Using the <pre> tags in a stylesheet is harmless; it just means that the text will be displayed in a <pre> tag, and it doesn't affect the output. Neither does it stop the content from being wikified.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Danielo Rodríguez]

The thing to remember about CSS generation is that the process is to wikify the stylesheet tiddlers into a widget tree and then just extract the text to use as the raw CSS. So, any HTML tags are ignored. This allows us to use (eg) the reveal widget without the HTML elements that it generates affecting the output.

Thank you Jeremy for confirming this. I was pretty sure about this, but with your confirmation now I feel better.
 

Neither does it stop the content from being wikified.

Just to be clear, you mean it does not stop the content from being wikified, right?

[Jeremy Ruston]

 

Hi Danielo

 

Just to be clear, you mean it does not stop the content from being wikified, right? 

That's correct, apologies for the clumsy wording!

Best wishes

Jeremy