I am trying webcomponents in a sample app. Since some of the specs are not included in some browsers, i tried using polyfill for those. In Mozilla firefox, i tried by enabling the key dom.webcomponents.enabled and adding some polyfills (that are not in browser). I have used HTML Import polyfill from webcomponents.js polyfill.
Still HTMLImport is not working in firefox, internet explorer (even with polyfill). (https://github.com/webcomponents/webcomponentsjs)
I also tried customElements v1 polyfill, not working in internet explorer and firefox. (https://github.com/webcomponents/custom-elements)
Has anybody succeeded in including HTMLimports polyfill with customElements V1 polyfill?
To use, in Firefox, Custom Elements v1 with HTML Imports:
Do not activate Firefox flags as the implementation is outdated.
Install webcomponentsjs (with bower for example), and include in your main file only htmlimports.min.js file.
Install custom-elements (from your link) and include in your main file custom-elements.min.js.
You main page should look like this:
<head>
<script src="htmlimports.min.js"></script>
<script src="custom-elements.min.js"></script>
<link rel="import" href="your-components.html">
</head>
<body>
<your-component></your-component>
NB: for step 3, you can also use document-register-element.
You cannot use Custom Elements v1 class syntax with Internet Explorer directly because class is not implemented. You'll need first to transform the source code with a transpiler like Babel.
Alternately, use a modern version (Edge), or use the prototype syntax.
Related
I'm using standard bootstrap with ASP .Net C# and it seems to be generating a lot of files like _navbar.scss. These work fine on localhost in both IE and Chrome. When I publish, it works in Chrome, but in IE none of the styles are being applied. I unfortunately have to code to IE as our standard.
I could understand it not working in IE both locally and in deployment, that would just be an issue with IE not complying with basic standards, but it does work on IE locally. I could understand it not working in production, that would likely indicate that something wasn't being copied over or something. I can't understand why it would work in production, and work in IE, but not specifically IE while in production.
Just to try and clear some of that up...
.scss files
The standard template does not generate .scss (Sass) files. It actually returns a standard .css file. The reason when debugging in chrome it shows .scss files is because of a source map which sort of deconstructs the .css file to tell you where in the .sass files that created it where the code originates.
You can read about source maps here
And find out more about Sass here
Css Differences Between Development and Production
The default template in _layout.cshtml has something like the following :
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/>
</environment>
What This Means:
In development you get the un-minified css
In production it will try and use a CDN for the bootstrap css
If the CDN is not available it will use the local minified css
You can read more about the Environment tag helper here
Bootstrap IE Support
Bootstrap only supports IE10+ so if you are trying to use an older version of IE that will be your issue. See here
If you do use polyfills to get it working with older versions of IE, IE still has some quirks to watch out for. For one if using additional style sheets IE 6-9 had a maximum number of rules they could deal with before freaking out, which you may easily exceed. See here
Working Out The Issue
If it is IE 10+ try and:
Verify is that the production site is correctly pointing to the
right CDN path
Verify that the fullback css path is accurate and not returning a 404
Hope that helps.
I'm using brackets.io for web dev.
The page looks great in the live preview, but when I just open the file from chrome by "file:///localurl/index.html" The page is not styled at all.
I'm using this in the <head>:
<link href="css/mystyles.css" rel="stylesheet">
Using "inspect element" on the page opened in chrome, it seems no stylesheet is applied. (There is also a bootsrapt CSS included, which I omitted for simplicity, but that one is not applied in chrome as well)
What am I doing wrong? The stylesheets are in the css subfolders.
Solved it, should have used ./css/mystyles.css and not css/mystyles.css
Using the Zen starter theme for Drupal 7, I've created this site: www.nettango.com. Everything seems to work fine and I've been figuring things out as issues come up. However, I've been trying to get IE8 to respect the responsive styles. Here's what I've done:
Site Settings:
Checked - Add Respond.js JavaScript to add basic CSS3 media query support to IE 6-8.
Checked - Add HTML5 shim JavaScript to add support to IE 6-8.
Checked - Add meta tags to support responsive design on mobile devices.
Which calls this into action:
<script src="/themes/zen/js/html5-respond.js"></script>
The script is being loaded, but it doesn't obey my mediaqueries.
After that, I replaced Zen's script with these:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Which had the same effect - nothing.
Here's a sample from my css file to show how the mediaqueries are setup:
#media screen and (max-width:1100px) {
html{font-size: 83%;}
#header {background:blue;}
}
Feel free to inspect the www.nettango.com site files. I've spent the majority of my day trying to solve this and have had no luck.
Thanks in advance for any help.
This is most likely because you are trying to use css3-mediaqueries while in development mode. Drupal 7 uses the #import rule for stylesheets in non-CSS aggregation mode.
From the css3-mediaqueires.js project summary:
Note: Doesn't work on #import'ed stylesheets...
Hence, css3-mediaqueries.js will only take effect when CSS aggregation is turned on (in production).
Appears the mediaqueries work on the live server, but not on our local server. Strange. Not sure why that is.
I also noticed you have to set firesass to false in your config.rb file. It wont work in IE8 if Firesass is enabled.
I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.
I'm creating a site using the Twitter Bootstrap, but I've discovered that the media queries don't work on anything below IE9 (unfortunately my target browser). This deeming the whole reason I'm using the bootstrap (for the responsive scaling grid) pretty useless.
I was considering the implementation of Andy Clarke's 320 and up responsive boilerplate within the bootstrap for the general better overall support on the IE side of things. (Or similar boilerplates)
Has anyone come across any examples of this being done online or on Github? (without the likes of SASS, HAML etc or being specifically created for a CMS). I have an idea of how I'm going to do it, but I'm not sure if it's a waste of time and I'd like to see if both tools can be pulled together successfully.
#fitzilla... I couldn't figure out how to add an additional comments, so I hope you find this.
I just checked my website in both IE7 & IE8 mode and both work. Do a view source on the initial page - you will see an additional hack for IE7 & IE8...
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Then check your includes against mine and see if they match. I believe the bootstrap-responsive has to be after the regular bootstrap css file.
In order for media queries to function in older browsers (IE7 and 8) you need to include a polyfill such as the respond.js in the body of your document to support those techniques. Just noticed that the 320andup framework uses the same polyfill so you can easily include it in your bootstrap project.
Here is a test page that you can use to test the queries on IE7 and 8:
http://chrisjacob.github.com/Respond/
Respond.js will make Bootstrap work for both IE7 & IE8 - at least using the developer tools (F12) of IE9. On my test site (http://ReactiveWebDesign.Net I include respond.js just before jQuery... the first included .js file