A customer complains that on his mac the css on his website looks terrible. i checked it and found out that he uses some settings in his browser to set the font to a specific one and also have a minimum height.
The problem now is that some of the css depends on heights and now is not working right.
is there any chance i can detect such things and override the css? (besides doing it with php and load a custom css)
I agree with the comments above. If a user customizes their local font settings the onus should not be on you to make it work. They've overwritten your intended design. That being said, here's a way to detect fonts using JavaScript.
http://www.lalit.org/lab/javascript-css-font-detect/
Related
FOUT in SPAs using FEFs. That's a lot of odd acronyms. :)
But it's still an issue.
I have a dynamic component which loads a bunch of components which are meant to look in a very specific way. Each would have its own css, and critically, its own specific fonts.
The fonts are the issue here.
What ways are there to avoid this FOUT in this case?
This is my current research on the topic:
Browsers have a mechanism to hide text it detects is styled with a custom font until the font has loaded.
This does not work in vue, because the text isn't loaded yet either for the browser to detect, so when JS puts the text, this browser mechanism isn't triggered.
Might be fixable via SSR, static DOM - browser can now detect. Still might not want - FOIT (Flash of invisible text) arguably worse (no content vs bad content).
This does nothing for dynamic components
CSS is consolidated unless async component.
You do get all CSS imports, but not all fonts until they are used on the page. I.e. it makes a network request for the css import, but not the fonts, until something on the page gets styled with this font. At least it's... quic. :D
WebFontLoader?
A js library by google/typekit, companion to google web fonts.
Possibly can be used to delay component loading until the font has loaded using its events?
Requires things outside the component to know about the font.
No obvious way to reach down and pull out CSS.
Depending on how many fonts you're loading and the size there are a few things you could do.
Call the fonts in the base HTML file (separate from your other CSS) so the browser is aware of them. Then create a hidden div in the parent component with CSS calling the font for the child. This will cause the browser to request the font before the child component is loaded.
Load all fonts separately in the HTML with rel='preload' or rel='prefetch'. I would do this at the bottom of the HTML so you don't block other content.
Load your fonts in the created lifecycle hook using the CSS Font Loading API. I'm not sure how this will work with Google Fonts vs self-hosting.
Create CSS transitions when loading content like a half-second fade to mask the FOUT. This is obviously not a solution but never underestimate the power of smoke and mirrors to influence the way your app feels.
Also, you should try to make use of the font-display (docs) CSS property. This won't solve the problem but it will make the results more predictable.
Since browser has its own default cascading style sheet applied to webpage, is there a way to replace it with Bootstrap? Like whether there is a browser that support this or one has to look into open source browser's source code and replace some parts with Bootstrap.
I don't think so. But why all on earth wanna do that? I think you need decompiled source of the browser to do this.
My current Website-Design is built with the Bootstrap responsive framework. It uses several custom fonts, which make up about 50% of the document size. The fonts are included via CSS, the way of inclusion can not be changed.
My goal now is to stop mobile devices from requesting these fonts, in order to reduce their bandwidth consumption.
Is there a CSS way, like #media (min-width: 480px), to not load the fonts in the responsive layout?
In most implementations, background images that are referenced in CSS media queries get pre-downloaded. (Unless you do some fiddling with your use of display:none;, but that won't be supported in all browsers.)
The same applies to any fonts you've included via media queries — even if they're specified for a larger/different viewport.*
Why?
This allows for a smoother transition if viewport size is changed, e.g. from portrait to landscape.
Solution?
Considering the constraints you mentioned, I don't see a clean way to do this only with CSS. You could do something with JS (but make sure it degrades gracefully), or PHP.
But the easiest ways to reduce HTTP requests and how much your visitors have to download include doing one or all of the following:
Using less fonts, or web-safe fonts instead.
Using a CDN for fonts.
Including 'minified' font files that only have the characters you'll
be using them for.
Check out Google Web Fonts for the latter two.
If you expect or get a lot of mobile traffic that's important for the site, it's always worth re-thinking a website's design and markup from a mobile-first approach: what's necessary and what isn't. (That approach can often help to even reduce clutter on the desktop version of your site.)
* The fiddling approach could be useful for fonts too, but you'd have to do browser testing yourself, as so far it's undocumented.
You could create two different stylesheets, one for mobile and one for desktop, then use PHP browser detection or various other methods to see if the user is on a mobile device or desktop device, and provide them with the corresponding stylesheet.
Take a look at the PHP get_browser function: http://php.net/manual/en/function.get-browser.php
All background images aren't necessarily pre-downloaded if referenced in your media queries -
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
perhaps this technique would also work for fonts too. Not if you're using anything that'd need JS (like typekit, google) your font's will be requested because of the JS anyways afaik.
What I would like to do is apply a system-wide CSS reset. How can I do this?
Here's a little bit of information about what is meant by a CSS reset.
The goal of a reset stylesheet is to
reduce browser inconsistencies in
things like default line heights,
margins and font sizes of headings,
and so on.
http://meyerweb.com/eric/tools/css/reset/
We do this by linking a reset.css in our host html page, as you normally would. It works like you would expect. You can also link reset.css into your module file, but it seems more appropriate in the host page.
What you might not expect is that GWT's default css will be injected afterwards, even if you don't link it in, if you're inheriting the default theme in the module.xml file. You can affect that behavior. Read http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html for more information about the details of CSS and GWT.
Is there any solution that allows you to design a webpage (with, say, a wysiwyg editor) and then automatically compile the design as one or several css file(s) compatible across multiple browsers?
Typically, using a WYSIWYG editor will generate superfluous entries to your HTML mark-up and create inefficient stylesheets that don't make use of CSS shorthand.
The best way to create stylesheets that are compatible across multiple browers sadly just comes with experience. By knowing the quirks of IE6 and IE7 you automatically cater for them as you create the stylesheet.
A good reset stylesheet will help to erradicate any default differences between browsers, such as line height, body padding, etc.
The exact solution you're after doesn't exist (yet).
I really don't think so. There are some CSS frameworks trying to deal with this issue, the more popular one I know is called YAML. Some JavaScript libraries are dealing with cross browser CSS issues, too (don't know a particular example at the moment though).
You may want to use PHP to write the content of a .CSS file.