Lately, I've noticed something strange, happening only in Chrome (my current version is 58).
It is a little bit difficult to explain, so I made sure to include clear animations besides my text explanation to show what is really happening:
The <h1> text is visible, notice how the computed color is #222, the content is above (I mean, it doesn't look like any z-index fault). But still, the text is not readable unless I resize the page or do some modification using devtools. It can be selected/highlighted though.
The application is built with Angular if that can help in any way, and I'm not using any sort of DOM encapsulation such as Shadow DOM.
I am using a set of shared styles (for example -- colors.scss), which I import in most of my modules.
home.module.ts -> home.component.ts -> home.component.scss
#import "../shared/colors.scss";
One of this shared stylesheets was typography.scss, which had the following (only relevant bits shown):
#font-face {
font-family: "Sawasdee";
src: url("/assets/fonts/sawasdee.ttf") format("truetype");
}
Repetitively importing the font was causing that screen flickering, so all I had to do was to make sure it was only being loaded once (and at the beginning of the app).
So I just moved the font import into the main module scss -> app.component.scss
Related
I'm a web developer, and I can see from Chrome DevTools that Chrome is loading an italic version of one of my fonts on every page. However, I have not intentionally used italics. I cannot see any font on the page that uses italics. I'd like to find the HTML element that is triggering that font load in order to eliminate it from my template. How can I do that?
Perhaps a javascript or jQuery snippet that goes through the DOM to look at the font-style of every element?
You can try to look inside network tab of the google chrome dev tools, click on fonts and reload the page. You will then see all loaded fonts. In the column "Initiators" you can see who was calling that font. Sometimes plugins are loading their list of fonts, and don't use it at all. That can help you maybe.
If you want to glance over which fonts you are using, you can install this chrome plugin https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
For more information, please provide a link for that website.
I think you were looking for:
[...document.querySelectorAll('*')]
.filter(e=>getComputedStyle(e).fontStyle === 'italic')
Pasting this snippet in the Developer Console will give you a list. If you expand the list, and click on individual elements, they will get selected in the Elements inspector. From there, you will also be able to tell which CSS file is giving that font style.
This will also work for any other CSS property, if you update the code snippet.
I'm using Ionic with Angular to develop an App. I intruduced dynamic theming adding two .scss files into my theme folder. I've got app.scss where I define only the layout of my components without colors. All colors are in the theme-*.scss files. To apply a theme I use a class over <ion-nav> element into my app.html. Something like this:
<div [class]="selectedTheme">
<ion-nav [root]="rootPage" ></ion-nav>
</div>
The selectedTheme is a string that assume the name of my theme so when I change it with an event such (click) or (ionChange) I can change the colours of my app.
A file theme-*.scss has the following structure:
.dark-theme {
ion-header {
//colors
}
ion-content {
//colors
}
}
This way works like a charm, but I've got a little issue I want to avoid. I set the default theme in constructor of app-components.ts file, before the famous platform.ready().then(...) that hides the splashscreen. My issue is that when the splashscreen hides I can see my app with its layout but without the correct theme applied. I see all white backgrounds and all black colors for a small amount of time, then the default theme is applied. I'm importing my custom themes in variables.scss, I tried to import them also in app.scss but the behaviour remain the same. It seem that before import the themes it applies the layout in app.scss and only after it applies the imported theme with all its colours. Someone has already see something like this?
I think that your issue is caused by timing of first paint which is an attribute on browsers. The webview where ionic runs can be consider as a sort of browser. So, same issue occurs.
why-first-paint-is-happening-before-domcontentloaded is a great explanation related to your question.
This page talks about first paint can start before DOM is fully loaded.
Especially, the below cited paragraph from the link describes same phenomenon of your app.
E.g. the parser obviously cannot emit Element nodes before processing
all of its attributes, but it can emit the node while still processing
its child tree. And the renderer may render the node without its
children. And it may be rendered with incomplete styles only to
undergo a reflow later, e.g. when javascript inserts another style
sheet or simply because the child nodes which have yet to be inserted
affect how it will be rendered.
In conclusion, you can not guarantee DOM is loaded before painting. So, I think that practical solution is hiding your splash screen a little bit later.
So I'm trying to get familiar with working with Flask bootstrap. However, one thing confuses me. I'm using http://getbootstrap.com/components/#navbar-fixed-top .
It tells me to add: body { padding-top: 70px; }
However, where does it want me to add it? I've added it manually to my html file, which works, but I'm working with blocks.
This is what it looks like now, which isn't the way it is suppose to be, I guess?
The place you are trying to add it looks fine. It just needs to be in any CSS file that gets loaded after the bootstrap CSS file. If you're inlining the CSS in your HTML, as it seems you are, and you're loading the bootstrap CSS correctly, from the <head> section of your page, then it will be loaded after the bootstrap, so that's ok. The only thing to bear in mind is that if you refactor the CSS into a separate file, the <rel> call to the page CSS file should go after the bootstrap CSS call.
What Flask calls blocks seem to essentially be templates, similar to those in backbone, ruby, mustache templates etc. When using these it can be helpful to let your page load in localhost, and inspect the source, so you'll be able to see how the final page loads, and where everything is loaded relative to other parts. However, the same principles should apply. With Flash you should be using the head block to load in the <head> section of your page.
I'm bringing a Twitter feed through to my site using the following code which is described on https://publish.twitter.com/
<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
The feed is displayed correctly. However it uses CSS which is provided via Twitter.
When I inspect it using Chrome dev tools I can see the following classes around the Tweets:
<p class="timeline-Tweet-text" lang="en" dir="ltr">
So I thought it would be a simple case of targetting this in CSS, e.g.
.timeline-Tweet-text {
}
However, this doesn't apply any styles to the Tweets. Why not?
I have also referred to Twitters guidance on this here https://dev.twitter.com/web/overview/css but that also doesn't work.
The only reason I want to do this is so the font used within the widget matches the font used by the rest of the body text on my website.
Simply adding a style rule to your top-level page won't work, because they are two different and isolated documents as far as the browser is concerned.
However, with the use of kevinburke's Customize Twitter 1.1 project, you should be able to embed CSS into a timeline. It does this by injecting a link to an external CSS file directly into the contents of the document within that frame.
In Kevin's published example, It makes all the text white, which looks a bit broken, but when I took this example and adjusted it to also turn the background red, we can see it's working as intended and you can therefore make any adjustments you like, provided you have a CSS file for it.
Note that this is only possible because Twitter have configured platform.twitter.com so that it can be embedded in frames. For security reasons, many websites will nowadays send a HTTP response header to prevent framing of the content, to avoid people meddling with their contents.
From https://dev.twitter.com/docs/embedded-timelines
Customization Options
Embedded timelines are available in light and dark themes for customization. The light theme is for pages that use a white or light colored background and follows the twitter.com aesthetic, while the dark theme is for pages that use a black or dark color background and looks more like Tweetdeck.
As with your twitter.com profile, you may choose a custom link color for your embedded timelines so that the content matches the links of your website and feels integrated into the color palette of your site.
For sites where the theme and link color do not provide enough customization to make the Tweets feel like they’re a part of the page, we offer a set of additional client side customization features. These settings allow you to control the background color, borders, header, and footer of the timeline, and are detailed in the “Client Side Options” section below
You Can Use CSS * Property for Setting the Fonts for all the Pages...
Example:(this might be useful for you)
#twitterFeed * {
font-family: "Lato" !important;
}
Reference Link for Twitter Widget Style :
https://dev.twitter.com/web/overview/css
https://www.solodev.com/blog/web-design/styling-your-websites-twitter-feed.stml
Unfortunately (Unless it has been changed recently) you can't manipulate CSS inside of an iframe
https://jsfiddle.net/tm94g9n4/5/
.timeline-Tweet-text {color: red;}
I added the color red to the text but as you can see when you inspect it doesn't even appear as overwritten. It's not referenced at all.
I think you'll need to look in to custom libraries for this. I can't recommend any as I've not done this before.
https://stackoverflow.com/a/6495816/1379450
Hope it helps
EDIT
It seems it is possible (Duplicate question)
How to apply CSS to iframe?
I have implemented a simple solution in my project recently, you can customize all kinds of styles to have it fit in seamlessly with your website branding.
jQuery('.twitter-block').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
//function call to override the base twitter styles
customizeTweetMedia();
});
var customizeTweetMedia = function() {
// overrides font styles and removes the profile picture and media from twitter feed
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-media').css('display', 'none');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('img.Avatar').css('display', 'none');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-avatar.Identity-avatar').remove();
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-size', '12px');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-Tweet-text').css('font-family', "'Proxima Nova', lato, sans-serif");
jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-size', '12px');
jQuery('.twitter-block').find('.twitter-timeline').contents().find('span.TweetAuthor-screenName').css('font-family', "'Proxima Nova', lato, sans-serif");
// also call the function on dynamic updates in addition to page load
jQuery('.twitter-block').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
customizeTweetMedia(this);
});
}
Link to my complete example
I'm working on an application and styling it right now, however occasionally when I save my style.css file (my temporary change stylesheet before changing it to LESS) I get some messed up elements that were fine before I reuploaded. I made no changes to those elements and I'm 100% sure it's not my CSS, it's also not my browser cache as I've cleared it and reloaded the page with the same issue. I've also added
?v=1.0.1
onto the end of my link to the stylesheet to trick the browser into believing it's a new one. (Learned that trick on StackOverflow to use with favicons, will give credit when I find where I got it)
It tries to search for the CSS in .LESS files that are non-existent on the web server. Could it be a problem with my bootstrap.css.map file being on the server?
EDIT: Another thing I can't seem to figure out, is why the CSS actually shows up under the LESS file reference?
I found my problem, it turns out I was using the wrong media attribute. For some unknown stupid reason I had set the style.css file to only display for print.. I just removed the entire media attribute to be displayed on all types and it works like a charm.