Is it possible to add a conditional style sheet to an xpage.
Done like this in html:
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Though about adding with computed field set to HTML and code javascript like:
return '<!--[if lt IE 8]><link rel=\"stylesheet\" href=\"../../blueprint/ie.css\" type=\"text/css\" media=\"screen, projection\"><![endif]-->'
but then it would be included in the body of page, not the header with the other style sheets.
Need for a proof of concept putting together using http://blueprintcss.org.
an Xpage theme would be great for this. There is an example included with the notes install.
go to C:\ Notes directory \xsp\nsf\themes
make a copy of webStandard.theme, rename is webStandard.xml and open in an editor of your choice, this will show you a lot of examples of what a theme can do. Apply attributes, add resources, compute these via expressions etc.
Snippet:
<resource rendered="#{javascript:context.isDirectionRTL()}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspRTL.css</href>
</resource>
<!-- IE Specific -->
<resource rendered="#{javascript:context.getUserAgent().isIE(0,6)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspIE06.css</href>
</resource>
<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspIE78.css</href>
</resource>
You can use the rendered property with SSJS to show an element for IE only:
rendered="#{javascript:context.getUserAgent().isIE()}"
Then your CSS ressource will only added to the generated HTML response if a XPage is opened with Internet Explorer.
EDIT:
In your case this should fit your requirements:
<xp:this.resources>
<xp:styleSheet href="../../blueprint/ie.css"
rendered="#{javascript:context.getUserAgent().isIE(0,7)}"
media="screen, projection">
</xp:styleSheet>
</xp:this.resources>
Related
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
It's also worth noting (perhaps?) that the page is using #font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
I've tried a few different things, to no effect:
Rearranging order of CSS stylesheet links
Removing link to stylesheets with #font-face
Disabling Firebug? (Read on here somewhere...)
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF is going wrong with Firefox? It's driving me nuts!
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.
What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.
It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
There was no need to rearrange links or not use imports within css or js files.
Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.
I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.
By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.
For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.
To be precise, in my code I accidentally closed the HTML tag too early, like this:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.
Filament Group share they way they load their fonts in detail,
http://www.filamentgroup.com/lab/font-loading.html
which is a nice modern approach to #font-face loading
Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.
A gist can be found at:
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
The original article detailing their decision can be fount at:
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
Additional recommendation
The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
I've had the same issue. In my case removing #import rule in the CSS file and linking all the CSS files in the HTML resolved it.
In my case the reason of FOUC in FF was the presence of iframe on page.
If I removing iframe from markup then FOUC disappears.
But I need iframe for my own hacking reasons so I changed this
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
into this
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
I've added this inline JS right in template just for readability: in my case this code runs once per page.
I know that it's dirty hack, so you can add this code in separated JS-file.
The problem was in Firefox Quantum v65.
I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.
As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.
In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.
#import "#fortawesome/fontawesome-free/css/all.css";
This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript.
The JS that was then executed forced the rendering of its content and thus created the FOUC.
So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.
This question already has answers here:
Suggestions for debugging print stylesheets?
(13 answers)
Closed 5 years ago.
I have used (as usual) #media print rules to specify how the print of a web page should be different to the online version. This works quite well, but the test is really difficult. What I usually has to do are the following steps:
Create the different style for screen and print.
Start your page in the screen mode
Print the page e.g. to a PDF printer.
Look at the result.
Try to find the rules that behave wrong.
What I would like to do (but was not able to do it with any browser):
Create the different style for screen and print.
Start your page in the screen mode
Go into the preview print mode (e.g. for Opera, Firefox available)
Use the available tools like Firebug (Firefox) or Dragonfly (Opera) to inspect the DOM and the current styles.
Change the CSS on the fly, reload the page, and look at the result and the DOM again.
Is there any browser or combination of browser, plugin and process available to get similar results? If you have ideas how to change the organizations of the files, with the most minimal changes to get the wished result, you are welcome.
Chrome Developer Tools has this feature.
Open Chrome Developer Tools for the page you want to test.
Open the Drawer if not already open. (Press Esc.)
Open the Emulation tab.
Click Media in the left menu.
Check CSS media and select print from the select box
Source: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types
The Firefox pluging called "Web Developer" ( https://addons.mozilla.org/en-US/firefox/addon/web-developer/) has a "Display CSS By Media Type" option.
Have you tried with Print Friendly Google Chrome extension.
Its a nice extension which adds a button and generates pdf of the web page on a click.
Hope that might be easier than your current process.
I have found a different solution to my problem inspired by Using Rails 3.1 assets pipeline to conditionally use certain css. Here is how it works:
Use in the main HTML file the following directives for stylesheets:
<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
isolate all rules in your stylesheets that are
appropriate for screen and print (Stylesheet: application.css)
appropriate only for screen (Stylesheet: screen.css)
appropriate only for print (Stylesheet: print.css)
During test of the print-out of your web page, switch the stylesheets in your main HTML file:
<link href="application.css" media="all" rel="stylesheet" type="text/css" />
<link href="screen.css" media="print" rel="stylesheet" type="text/css" />
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />
Notice the switch in the second and third line for media="print|screen".
As the result, you are now able to call your main HTML file, and see how it will look if you print it out under normal conditions. All the tools you normally use (Firefox Firebug, Chrome Developer Tools, Opera DragonFly, ...) will work as normally, so you are able to check your DOM, see the boxes, change CSS on the fly and just reload your page then.
Works pretty well for me, if I will stumble over some drawbacks, I will come back and notate that as well.
If you specify your Print & Screen CSS rules in separate files, you can do this quite easily using the Chrome Developer tools. Load your page and open the Developer Tools. From the "Elements" view, edit the media="print" line so it reads media="all".
For example, if you link your style sheets like:
<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" />
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />
Change:
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />
to read:
<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />
You will now have the print styles applied to the copy in your browser window. You can navigate the styles and elements as you would with any other webpage.
Here is a practice that I have found helpful with styling for print when the print layout needs to be a modification of the generic styling.
Create a print style sheet that uses #media print { } to frame the print styles
Apply that style sheet last
While working on print styles, temporarily comment out the lines that frame your print styles
Use Firebug and Web Developer in you accustomed way
Uncomment the media bracketing
Something like:
/* #media print { */
#sidebar {display:none;}
/* } */
I have written a confluence macro. It uses velocity to generate html table. How can I style this markup with css if I don't use <html> and <head> tags in my velocity model. I have tried to do as in this example but id doesn't work(I mean it takes no effect and there is no css resource file that I have specified inclusion on the code of result page of macro)
if i understand you correctly
you need to add links on your css files to atlasian-plugin.xml for example
<atlassian-plugin name='Just name' key='com.your.path.to.lib'
plugins-version="2">
<resource type="download" name="style.css" location="css/style.css">
<property key="content-type" value="text/css"/>
</resource>
</atlassian-plugin>
after that you need to add this link to the top of your velocity template
<link rel="stylesheet" href="$req.contextPath/com.your.path.to.lib/style.css"
type="text/css"/>
I have a master page to apply to all my pages, the master page is doing its work however, it seems that is unable to resolve the CSS file address for pages I have in child folders.
I have a set of folders like this:
RootContent
UsersContent
AdminContent
Since the master page and css files are on the Root content, when the master page tries to locate the css file inside UsersContent or AdminContent it cannot find it.
I'm using JavaScript to detect the browser and set the css properly for most browsers and another file for IE6 since is required in here, any ideas?.
<script type="text/javascript">
if((BrowserDetect.browser.toString() == "Firefox") && (BrowserDetect.version.toString() == "3.5"))
{
document.write('<link rel="Stylesheet" href="<%=ResolveUrl("~/StyleSheet.css") %>" type="text/css" />');
}
else if((BrowserDetect.browser.toString() == "Explorer") && (BrowserDetect.version.toString() == "6"))
{
document.write('<link rel="Stylesheet" href="~/StylesheetIE6.css" type="text/css" />');
}
</script>
In the code above I tried <% ResolveUrl("~/StyleSheet.css") %> but didn't work, it works while in the same folder but not on the childs.
EDIT: Just to clarify my CSS file is on my Root Folder not on the childs
A simplest way Add App_Themes folder under your web project. Add a theme and under that theme add all css files include their respective image directories.
In your web.config, add
It will automatically get added to the every page.
Note:- In this case all css will get applied. If you have browser specific css, then this is not the way.
[SEE UPDATED]
a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to detect the release build of IE 5.5, you will need the following code:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For example, to test for all versions of IE greater than or equal to version 6, you can use
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The above code examples work because a normal browser sees the entire block as HTML comments since they are enclosed within "". IE 5 or above will however attempt to parse the block to see if it has instructions specific to it.
You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Notice the operator "!" immediately preceding "IE". This is the NOT operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.
Again, the above code works because a normal browser will interpret "" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.
Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 or above:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Since the documentation does not specify that these features apply only to the Windows versions of IE, I assume that they also apply to the Macintosh version. I'm not able to verify this though.
I have always used ResolveClientUrl for this purpose. Can you try that instead of ResolveUrl? And here's a post discussing the difference.
Have you tried adding runat="server" to the link tag? Worked for me.
A page on my site has a link to a stylesheet for media="print".
<link rel="stylesheet" href=".../print.css" type="text/css" media="print" />
Most browsers correctly ignore this link when rendering for a screen, but IE7 includes the file and processes the style rules, rendering the page inappropriately for a screen display.
How does IE (and how do other browsers) recognize what the intended display is? Is there an HTML header (or absence of) that guides them? Can this be correctly with Javascript?
Use the #import at-rule instead to include the file only for print and bypass IE7:
<style type="text/css" media="print">
#import "print.css";
</style>
If that does not work, try the other alternatives on the media test page