what would it take to allow media queries through HTMLPurifier + CSStidy?
In other words, I am using these libraries:
require_once 'inc_php_classes/htmlpurifier-4_4_0/library/HTMLPurifier.auto.php';
require_once 'inc_php_classes/csstidy-1_3/class.csstidy.php';
...to sanitize admin-user input before I save it to database.. for populating an external style sheet ... and so it happens that any input media queries are getting munged.. e.g. this:
#media only screen and (min-width: 600px) and (max-width: 939px) {
becomes
#media only screen and min-width 600px and max-width 939px {
..which breaks the media query, at least in Chrome 18/Mac.
The form/input is used for creating custom style sheets for trusted admin users.. and they need media queries.. but even though they are trusted, I do not want to just drop use of CSStidy.. because of the off chance an admin goes AWOL, not to mention I want to clean their newbie CSS errors.
Not sure, it's definitely not supported by vanilla HTML Purifier. It is reasonably plausible that CSSTidy does parse media selectors properly, so it's just a matter of teaching HTML Purifire not to strip them out.
Related
I was trying different solutions to use #media in css (or to be more precise, sass) and was thinking about the way we commonly use #media. The most common way, at least that I know and I see on blog posts, tutorials, etc.. Is to define some standard values and then we use them. For example:
$small: 420px;
$medium: 768px;
$large: 992px;
$extra-large: 1200px;
#media screen and (min-width: $medium) { ... }
#media screen and (min-width: $large) { ... }
The problem I'm facing with this approach is that my menu doesn't fit well any of the predefined values. So when it break the media size, it gets a huge blank space, even thought there is still space to fit the menu. In this case I could break it at 780px but the values are 768 or 992.
So my question is.. Is it okay to approach media queries this way and break the media based on content by defining the values manually?
The menu would be 780px, let's say that a grid that I display the company members would break at 820px and 540px. Each of them I would need to analyse it visually on the browser, measure and set the value manually.
I would still use (if there's not a better way) the pre defined values for common elements on the page (if needed). There is this article that I like a lot (a little out of date but a good concept), it covers the screen size usage and how to group them. But it doesn't approach the issue I'm questioning here.
Also, other big companies, like Airbnb, Spotify, Github they use predefined values to break the #media content. All based on predefined values, not the content. Spotify is one example. The menu breaks too soon, even with enough space to keep the items before moving to aside off screen.
--
The only reason I can think of to keep using this method is because we, as end users, are so used to have a menu toggle on the top header that it doesn't matter if there is enough space to keep the inline text. Since we are used to the button to open the menu, we use this technique, hence the use of pre defined media values.
I have a Drupal site where the site on mobile isn't shrinking. It was working fine a few days ago and when I logged in today to do more work, it isn't anymore. I can't seem to figure out why.
I've tried several options for the viewport and none have made a difference. It may be that I've just looked at this code for too long and I'm just missing something.
It's just the front page: http://inv3nt.tgci.com/home
The inner pages are still under construction as far as the theme and such goes, so they're all messed up right now.
Eventually the site will get its own mobile theme, but for now I need this one to scale appropriately on mobile devices. Wish I could figure out what changed in the last few days to make it not work when it was previously.
Thanks for any help you can give. :)
It looks like you have no responsive theming, you have also set a min-width on the page wrapper meaning the page can not go smaller than 1200px
#wrapper {
min-width: 1200px;
}
#main-content {
width: 1200px;
}
You will need to add some media queries http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
eg.
#media screen and (max-width: 1200px) {
#wrapper {
min-width: 100%;
}
#main-content {
width: 100%;
}
}
You will also need to fix other issues such as the header and where you have 2 or four column elements.
You should look at creating a mobile first theme for your site to avoid having to create multiple themes.
You should also look at implementing a mobile menu, I recommend https://www.drupal.org/project/responsive_menu although there is a small cost for commercial use of one of the scripts
I working on my new site in Joomla 3 with mobile ready theme. Can somebody tell me please, how I can hide few modules for mobile device (iPhone, etc...) visitors? I have a long banners in two modules, what is looks nice if visiting that site with computer browser. But how I can hide this modules if somebody visiting my site with mobile device? Is too long and broke a nice view...
Assuming that your template is using Bootstrap (and most 3.0 templates will be), you can just add a special class to the module to hide it for phones. When editing the module, go to Options -> Advanced Options and look for a box to add a "Module Class Suffix". Add " hidden-phone" (space is important at the start since some modules don't put it there for you...) to hide for screen sizes less than 767px. Add "hidden-tablet" as well to the list (also separated by a space) if you want to hide it as well for 767px to 979px widths.
I don't know if this is the best solution but it's a solution that I have now in mind.
You can use the JBrowser class
$browser = JBrowser::getInstance();
$browser->isMobile()
it returns a boolean value.
You can hide the modules from the template directly.
In the new version of bootstrap there is a new css names for hidding modules, check it on http://getbootstrap.com/css/
For example:
"hidden-xs" stands for the old "hidden-phone"
But if you still have a truble and "hidden-phone" nor "hidden-xs" works. You can add this class by yourself:
Add this code to one of your Css files (your style.css or your custom.css):
#media (max-width : 768px) {
.hidden-phone {
display: none;
}
}
Then follow the advise above and add module class suffix to desired module.
When editing the module, go to Options -> Advanced Options and look
for a box to add a "Module Class Suffix". Add " hidden-phone"
I am about to create my first 'mobile-first' website and am unsure on the best way to conditionally load content as the viewport increases.
For example, lets say I wish to load a twitter feed only for desktop browsers, not mobile, how would I do this?
Option 1) Display: none - This is bad as content still loads for mobile
Option 2) Have content in markup, but remove.element with javascript - I believe this content still loads first, then is removed after? If so, not good.
Option 3) Using javascript, if viewport is wide enough, load content - This seems to be the recommended approach, from what i've read, but Is it a good idea to have markup in javascript? I am thinking about accessibility, semantics and seo.
Are there any other better solutions?
Any advice would be greatly appreciated.
You might want to check out Modernizr . It's easy to install and you can use it check for HTML5 support in a visitors browser, as well as the window width, for example:
if (Modernizr.mq('(min-width: 400px)')) {
/* do this for tablets and desktops */
}else{
/* do this for handhelds */
}
Good luck!
UPDATE
thanks, but then in that case would it not be better to do that straight with javascript - if (document.documentElement.clientWidth > 640)
You are right, for that specific instance of deciding whether or not to load a twitter feed, there probably isn't a big advantage of using my suggestion over your option 3. Thinking ahead though, with repsonsive design, mobile sites and now HTML5, the next questions you are going to come up against are how to customise the CSS for different viewpoints, or how to test if a visitor's browser supports a certain HTML5 feature.
You could certainly take a roll-your-own approach and write custom javascript for each case, or you could use Modernizr to test if the visitors browswer supports media queries, and if it doesn't load respond.js, or use Modernizr to test if the vistor's browser supports geolocation or html5 forms or certain video formats ..., and if it doesn't conditionally load a cross browser polyfill.
There are usually multiple ways of achieving the same goal, I'm strong on not reinventing the wheel ;)
Who says? Display:none; is one the best practices in showing and hiding elements for any specific viewport.
And one thing Adam, mark-up is the least downloadable stuff for each device, they have to process some other things if you hide element by Jquery or Javascript. Because sometimes small devices either don't support loading them or take extra time that's why they are visible.
But it has the pitfall for SEO purposes.
For SEO optimization along with hiding elements you can do one of these things with your CSS.
First,
#media screen and (max-width:480px) {
div {
position: absolute;
left: -9999em;
width: 0;
height: 0;
overflow: hidden;
}
}
But it was the less efective because Google Webmaster takes care all such hacks. And You may be blacklisted from being Google indexed.So You should use one of these modern methods to hide elements.
Second,
div {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
or, third,
div {
color:transparent;
text-indent:100%;
overflow:hidden;
white-space:no-wrap;
font:0/0 a;
text-shadow:none;
}
How do I define multiple media queries in one file?
I have this .styl-file:
#media (min-width: 980px)
body
padding-top 60px
#media (min-width: 768px)
body
.container
width 768px
This is giving me the error expected "indent", got "newline". Placing them in separate files and having one file include the other works. But when I have them in the same file and a second file that is importing this one it fails.
Update: The code of the files can be found here:
https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/style.styl
https://github.com/mastoj/NodeJsExpressFun/blob/master/public/stylesheets/nblog.styl
Your problem is that you have tabs in the top query, and spaces in the lower. Try to be consistent (this is a good practice in general, when it comes to all kinds of programming). I don't have a preference either way, but you should probably look into your editor settings to see if you can enforce consistency on that level. My editor puts 4 or 2 spaces when I press tab, depending on language.
Your example in the question works, actually (there's only spaces in that one).