I am starting this web app project (asp.net mvc)
It's a document-based system, such that nearly each web page is a model of an official printed form (and users sometimes should be able to produce prints).
I am wondering how much cost and time saving it will be if the form could be a wyswyg page that will serve both electronic and paper audiences.
I know that Adobe Acrobat forms has something like that. Would've have been perfect for my purposes but it's not pluggable -- meaning I don't have a choice as to backend system.
Does anyone know anything out there that renders pdf/like pdf to the printer but has html form submit capabilities?
Why not css print media? For example,
<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
You can define both the things in the same page. Something like this,
<link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
<link rel="stylesheet" href="css/printstylesheet.css" media="print" />
I hope this is you are looking for, not sure though.
An excerpt from the book Pro CSS Technique.
Edited:
CSS print media browser conformance.
Check out wkhtmltopdf... FOSS and uses webkit rendering engine (safari, google chrome) to convert from html to pdf... I tried compiling it on windows and I got it to work. Much better than anything else I can find. Supports all the css I can throw at it.
Related
As I have enabled the HTTP2 protocol of IIS, but the requests of the main javascript files were still queueing. According to the explanation of queueing by Chrome, I really don't know what cause this.
You can check at here: https://app.youjustgo.com/zh/
Queueing:
HTTP/2 means that more assets can be downloaded at once - not that they will be.
Browsers have various heuristics as to what to download and when.
For example, if an image is needed by a CSS file, then that image cannot be requested until the CSS file is downloaded and processed for example (ignoring preload). So in this case the CSS and the image will not download in parallel despite HTTP/2 allowing this.
Another issues is that <script> tags can change the content of the page, so unless it is explicitly marked as async (or defer) it is "render blocking". This means any JavaScript further down the page will not be run until the <script> tag is run. Now a browser could scan ahead and download the future scripts and just not run them until it needs to, if it wants, with the slight risk that it's a wasted download if the scripts subsequently are not actually needed. That's up to the browser and maybe Chrome decides it's not worth while to do this.
Looking at your specific site, your home page looks to be made up of basically only script tags. You could investigate the use of async or defer to allow more downloads to happen in parallel, but if you want the real performance improvement, you probably should go back to the basics of coding HTML, with CSS, and then enhancing it with JavaScript, rather than coding it all with JavaScript.
I'm also not sure of what the point of your preloading of your CSS is?
<link rel='preload' href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link rel='preload' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.0.2/mapbox-gl-directions.css' as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link rel="preload" href="https://npmcdn.com/angular2-toaster#2.0.0/toaster.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<link rel="preload" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
<link rel="preload" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
Preload is intended for assets that are not immediately apparent to the browser (like the image example above) to allow it to start downloading earlier. Here you are using it to preload CSS. The only advantage is it will not be render blocking and then you use the onload function to display it. However CSS normally is render blocking for a reason - otherwise your content looks unstyled. And because it is preloaded it's requested as high priority (which the CSS would have been requested as anyway), so not sure what advantage this is giving you to be honest. Very confused...
This is by far one of the weirdest things I've seen. I decided to check back on a site I made a while ago, and of course something was off. I now mainly use Firefox and noticed the formatting looked odd. I switched to Chrome and everything looked great. I switched to Edge and everything was wrong again. I inspected element in all three and only in chrome did it show the CSS for each included class in the elements (login button, text entry boxes). In Edge and Firefox, only the CSS for the last class seemed to be included.
The site is https://avonctnhs.org
Does anyone have any idea what is going on here? The classes are set in HTML, there is no JavaScript adding the classes at runtime, etc; just HTML loaded from a file on a server.
Thank you so very much.
Edit: I spent a while searching and the only answers I could find where for people trying to add classes in JavaScript or people with typos that didn't work in any browser.
Additionally, all the code that should be needed should be visible with a nice quick inspect element.
Your CSS files fail to load because your page relies on HTML imports which is not supported by all the browsers.
Your source code has the following lines which should be replaced.
<!-- Additional Headers -->
<link rel="import" href="/core/custom-elements/text-input/text-input.html">
<link rel="import" href="/core/custom-elements/button/button.html">
The above lines can be replaced with the below code which is actually the contents of the above two files.
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
This should fix your issue. Here is an excerpt from MDN which states Firefox doesn't yet support HTML imports.
Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.
I am a bit confused about the behavior of <link rel="alternate" ...> in browsers and i am looking for some clarification. Let's use the following code for illustration:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="a.css" type="text/css"
title="Main Stylesheet">
<link rel="alternate stylesheet" href="b.css" type="text/css"
title="Alternative Stylesheet">
<link rel="alternate" href="fr.pdf" hreflang="fr" type="application/pdf"
title="Alternative document in French">
</head>
<body>
</body>
</html>
When this code runs in a modern browser (e.g. Firefox v27.01), the browser parses the above HTML document and then downloads the stylesheets, a.css and b.css. The former is used to apply the style to the document. However, b.css is available through the 'View > Page Style' menu of the said browser. So, clearly the parser in Firefox is able to recognize the "alternative" stylesheet and in this case decided to download it.
One can read at W3C > HTML5 > 4.8.4.1 that the outcome of parsing those <link>s are basically hyperlinks referencing the respective document. In the case of stylesheet, the browser is smart enough to download it as well. But, for the other alternate document (fr.pdf) in our example, it looks like Firefox does not download it and if it links it, it is not visible anywhere. I tested in Chrome (v.33.0.1750.117), Opera (v.19.0.1326.63), IE (v.10.0.9200.16798) and could observe same thing (i.e. no visible artifact that the fr.pdf has been linked). So, as all those modern browsers behave like this, it looks like I have misunderstood the meaning of "alternate" relationships:) Would someone have an explanation for me of how they are intended to be used? My belief is that in a RESTful manner, user-agents should be able to (hyper)link all the <link>s in order to navigate that web.
Thanks in advance.
The <link> element does indeed identify external documents that are related to the current document. And the rel attribute specifies the nature of that relationship. In the specific case of rel="alternate stylesheet" (some) browsers can do something specific with the link. In particular, Firefox and Opera give the user a chance to select this "alternate" stylesheet from the application's menu. See, e.g., the screen shot
from this article.
In order to apply that style sheet, the browser needs to download it.
In the more general case of rel="alternate" (not a stylesheet), then the browser won't know anything useful to do with the related link. Therefore, as far as the browser is concerned, there's no need to download it.
I currently have a webpage that displays an application. The purpose of this was so that a user would be able to receive a version of this application pre-filled with their information so they would be able to print it out. Currently the page looks great and matches the application almost one for one.
UNFORTUNATELY when looking at the print preview it is a horrific mess; there are line breaks everywhere and nothing seems to line up the way it looks when looking at the webpage.
Is there something I have to do to have the CSS rules applied to the printed version of the page?
WHELP, I found when I added "print" to media, it applied the CSS correctly and now is displaying as it should.
So this basically fixed the issue...
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" media="screen, print">
is it possible to add the jquery mobile look and feel of some buttons onto a desktop browser?
I included the jquery mobile css and js files and when I click the button, it's doing some behind the scenes stuff and not actually taking me to my destination. When I remove the JS (the cause of the strange behavior on the desktop), the button, as expected, doesn't get rendered the way I want it to.
Ideally, I'd like to just see the pure css and simplified JS that's rendering the button so that I can just add it to my desktop layout, and if that's an option to do somehow, that would work for my purposes.
I really don't want to have to dig through all of the jquery mobile js files and figure out what is going on there to piece this together though.
how can I just pare out what I need to have my buttons rendered on the desktop with the same look/feel as the mobile device w/o the mobile device functionality.
Edit for answer below:
this is what I"m calling now on my desktop page:
<link href="/Content/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.mobile.custom.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/content/mobile/themes/LS.min.css" />
<script src="/Scripts/jquery.mobile.custom.min.js"></script>
and calling the button like this:
<a data-role="button" data-theme="a" href="/home/foldit" data-icon="star">
Fold It
</a>
this is showing a textual representation of my button, not rendering the button. the only file I didn't include from the package is the "custom theme" css file because I figured that my theme should replace that. (the LS.min.css file).
Yes, it is possible.
You can rebuild jQuery mobile framework and use only wanted modules.
Go here: http://jquerymobile.com/download-builder/ and select only what you want.
*We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible.*
It is only usable with jQM 1.1.1 up to 1.2