I currently have a web application that uses Themes to skin it either as SkinA or SkinB. Until now, this has been a web application that has not focused on mobile devices in any way, so the site.css file (within both Theme folders) has targeted normal desktop devices.
However, without changing any of the web form aspx files throughout the project, I now need to create a mobile version of this site.css file (for both Themes) that will alter the layout so as it looks a little bit cleaner when viewed on mobile devices.
I found the following snippets in an article that sounds fairly logical, however, due to Themes folders being used (and from the little I understand about themes, I think all CSS files get included automatically), I'm not sure how I would accomplish this.
Extract from: http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/#mobile-stylesheets
First, define two stylesheets: screen.css with everything for normal browsers and antiscreen.css to overwrite any styles that you don’t want on mobile devices. Tie these two stylesheets together in another stylesheet core.css:
#import url("screen.css");
#import url("antiscreen.css") handheld;
#import url("antiscreen.css") only screen and (max-device-width:480px);
Finally, define another stylesheet handheld.css with additional styling for mobile browsers and link them on the page:
<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
Or perhaps there is a better way of accomplishing this, whilst retaining the use of Themes?
I have come across this in a project I'm doing at the moment.
One way you can do this is to use Modernizr.
It's a javascript library you can get at modernizr.com.
It will test the destination browser, and if it supports touch events, it will add a style of "touch" to the element of your webpage. Generally, if Modernizr does this, it's either a tablet or a phone. Then you prefix each style your phone/tablet css with ".touch".
Couple this with media queries, and you should be able to handle most (probably not all) devices out there.
Related
In the PageSpeed Insight report for my site, it's listing all of my css files as "render-blocking resources". My css links all look like this:
<link rel="stylesheet" type="text/css" media="all" href="https://example.com/something.css" />
In the documentation, it says <link rel="stylesheet"> tags are listed as render-blocking stylesheets if they don't have a media attribute that matches the user's device. Since my stylesheets all have media="all", why are they getting listed as render-blocking resources?
The documentation is very misleading.
What they are trying to say is they will not flag something as render blocking if you have a media query that matches the users device only (so a max or min width or an orientation for example).
However even then they will flag it under 'critical CSS' and even if they don't flag it, it is still render blocking if that CSS is required for the 'above the fold' content.
Further down the page you linked in your question they explain it slightly better
Another approach to eliminating render-blocking styles is to split up
those styles into different files, organized by media query. Then add
a media attribute to each stylesheet link. When loading a page, the
browser only blocks the first paint to retrieve the stylesheets that
match the user's device.
That part is the important part, they are trying to get you to put your mobile styles in one style sheet, desktop in another so you only load the bear minimum CSS to render the page initially.
What really matters
Ignore all the confusing stuff, here is the simplest way to tackle a few audits at once.
Inline your critical CSS - the only step you really need
Any CSS that is required to render the 'above the fold' content should be inlined within your HTML within a style tag.
I will warn you, this is difficult, none of the tools out there do this perfectly and it must have every single style rule included to work. (e.g. if you missed just one class that is required to render something 'above the fold' the browser will wait for the style sheet that contains that rule to be loaded and block the rendering.)
Designing for this from the start is the best option
I keep all my 'above the fold' styles in a separate file and inline them at runtime.
I split these files into 2 types - global (site header, general styles used on multiple pages above the fold etc.) and page-specific (e.g. hero for home page, form styling for contact forms etc... whatever is 'above the fold' on each page that is unique enough to not add to the global above the fold styles.)
This will deal with render blocking resources, critical request chains (for CSS) and give you super fast First Contentful Paint and First Meaningful Paint.
Then you just do as they suggest having styles for mobile and desktop separate and make sure you remove unused CSS if you can (yet again a very difficult task so best to design for it from the start).
I ran into a problem at working with Shopware today. I want to restrict the usage of certain CSS files (mobile css and desktop css).
Problem is: both files are being used and it seems to not letting me restrict the files to the viewports. What did I do wrong?
Would be great if you could help me out here, since Ive just started in LESS templating. Cheers!
{extends file='parent:frontend/index/header.tpl'}
#phoneLandscapeViewportWidth: 30em;
#tabletViewportWidth: 48em;
#tabletLandscapeViewportWidth: 64em;
#desktopViewportWidth: 78.75em;
when (#media screen and (min-width: #tabletLandscapeViewportWidth)=true) {
{block name="frontend_index_header_css_screen" append}
<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_public/src/css/custom.css'}" />
{/block}
}
#media screen and (max-width: #tabletLandscapeViewportWidth) {
{block name="frontend_index_header_css_screen" append}
<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_public/src/css/mobile.css'}" />
{/block}
}
First of all: As the comments already state out, you're mixing up different languages.
By now - from your example - you're dealing with three things, that cannot be combined in that way as you try it:
LESS: This is a preprocessor language that - at least in a Shopware 5 context is meant to be compiled and generates your CSS
files (there is a way of including LESS files directly, but this is not recommended for production, so I'd leave this part out).
CSS: Your stylesheets that are rendered. If you statically include them into your template (I mean if you're not using Javascript to dynamically change your DOM) you WILL have to decide whether you use one or another CSS-File before you render the DOM.
This brings us to the next CSS related-topic:
Media Queries: The concept of media queries is not meant to dynamically change the DOM (i.e. clearing out one CSS-Stylesheet and bringing in another).
Imagine the following case: You sit at your Desktop-PC and slowly drag the window of your browser smaller and smaller until your viewport-width is smaller than 64em (#tabletLandscapeViewportWidth). What is the media-query supposed to do? Request the server to load another resource?
Remember: Media Queries are CSS and CSS is all about style of your Website. In a normal case it is served once when the page loads and the rest of the magic happens in your client. There is no further communication with the server (and this is what you'd try to do, i guess).
Smarty (.tpl): The third part you mix up here is the .tpl files, and these come from the Smarty-Template-Engine. So we have to be clear here: Smarty renders your template. This happens server-side before the page is delivered to the requesting client.
That means you can decide to load one or the other css at this point (but not by media-queries, I'll come back to that later) but once the page is delivered to the client, Smarty's work is over and it will do nothing without another server-request (i.e. by an AJAX-call).
I must confess that I am not absolutely understanding what exactly you want to achieve. If you only some CSS definitions to a certian viewport width, you don't need to go into the template at all.
Let's assume you only want your styles that are in the custom.css apply when the viewport is larger than #tabletViewportWidth and everything below should serve mobile.css.
Since you can nest media-queries in CSS3 it shouldn't be a problem to wrap the whole less file into a media-query like that:
#media screen and (min-width: #tabletLandscapeViewportWidth) {
// all your custom.css content
}
#media screen and (max-width: #tabletLandscapeViewportWidth) {
// all your mobile.css content
}
But please keep in mind that this excludes all other media-types, so you maybe should go with #media all.
If you really want to change the stylesheets dynamically you should go with a library like Modernizr and make an AJAX-Request that dynamically changes the stylesheet, but imho this is kind of an ugly solution that only makes (no real, but with a bit of fantasy a little bit) sense if no stylesheet is loaded (or a base-stylesheet with styles, that both .css-files share) and the call is made to request a smaller CSS-File.
But if the production-css-file is minified this shouldn't be worth the effort.
As you can see, in the offered solution we are not even touching a smarty-tpl-file. But i want to mention a little thing if you work with smarty:
You're extending a file here, therefore every junk of code needs to be inside of the {block}-tags you're extending. Smarty doesn't know where to put the code otherwise and will throw an error (even though, as explained LESS-Code won't work anyways here ;) ).
regards
I am currently creating a Bootstrap 3 website for mobile and desktop, taking the mobile first approach.
I have been following this webpage Creating a Mobile-First Responsive Web Design
It mentions using a style.css for mobile view and enhanced.css stylesheet for a desktop view.
I know this is possibly quite basic but I am slightly confused as I am currently using one stylesheet which holds the mobile styles as default and I am using media queries for the tablet and desktop views.
I want to know what styles should be added into the enhanced.css stylesheet for desktop view?
It really doesn't matter whether or not you separate it into multiple stylesheets or one stylesheet. It really is a matter of personal preference.
I personally use one style sheet for things that I want to be universal throughout the entire website (such as a universal font, or a universal font color). I call that sheet pageFormat.css.
Then I create a separate CSS file for each page I create if I plan on adding and adjusting things such as button sizes specific for that page.
Just be sure that whether you are including one stylesheet, or multiple, you are including the link reference so your HTML browser knows where to locate the CSS file that has all the data.
I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
I recently came across a use of the #import rule on Coda.com. They're actually using to import the main style sheet for the site, specifically the format:
<style type="text/css" media="screen">
#import url(./coda.css);
</style>
Which will hide the rules from Netscape 3 and IE 3 and 4. Since a web development tools primary audience will be using modern browsers, what other reasons would there be to use this rather then a link?
None. Using a <link> element also has the advantage of getting rid of the FOUC.
EDIT: Using #import in another stylesheet (.css file) can be used like an #include in C, but there isn't any reason to use #import in a <style> block.
For Coda's site, I'd imagine they did that more out of force of habit rather than any pressing technical need.
#import statements inside of actual CSS files (not in a <style> element in HTML) serve many purposes, such as making it easy to swap in and out other CSS files. The Blueprint CSS framework does this to let you easily remove certain portions of the framework such as the typography stuff or the grid stuff.
Of course, in a production environment, using a bunch of #import statements is frowned down upon because it increases the number of files a web browser has to pull down.
The only reason to use this rule today is to make your CSS more modular by splitting it into different files, like libraries.
So, while your page might link to one stylesheet, that stylesheet can #import other stylesheets for reset, typography, etc.
However, this does slow the loading of your page since it's just more sequential http requests.
I agree with Andrew. I also use imports to split out my css logically. Personally I like to split them out in 4: reset, structure, typography, general (bgs/borders etc)
Depending on the person doing it, their style and preference, css files can also be split out by page section eg header.css, footer.css etc.
One extra thing I do however to avoid the multiple http requests is have a build process which merges (in order of import) and compresses the css files for live deployment.
Hope this helps
I use a modular development approach myself, and often end up with 10+ individual CSS files. As you know, that's a pretty drastic number of HTTP requests, so I like to use Blender.
Blender is a rubygem that consolidates and minifies any number of CSS files into a single stylesheet. It also works for JavaScript.
You can define #media in your individual stylesheets to only serve the appropriate rules to the correct device types.