I just included Modernizr in my project, but it adds the .hidden class to my html tag. This causes Bootstrap to hide the entire html tag, which is, well, not that useful..
Does anybody know why it adds the .hidden class to the html?
Thanks in advance!
I encountered the exact same issue and found two solutions.
Looking through the Modernizr download page, it looks like the "hidden" class is added when Modernizr is checking for and detects support for the [hidden] attribute.
Simply make a build of Modernizr with detection for the [hidden] attribute omitted.
If you actually need to detect it, and overriding Bootstrap's CSS rule with your own on html.hidden isn't something you want to do, you can configure Modernizr with a class prefix to prevent the name clashing.
Related
I'm developing a Vue app using UI Kit which implies using various custom attributes like uk-grid, uk-icon, uk-navbar etc (in Vue single file components' templates). For each one, IntelliJ gives me a warning like
Warning:(7, 52) Attribute uk-icon is not allowed here
How can I tell IntelliJ not to do this? Googling the warning haven't brought any sane results which makes me think there's no ready-to-use package for this (for this particular UI Kit), so the question is: how to make Idea not to warn about a custom list of attributes? But I'll be glad to be wrong and if there is a better solution, please let me know.
Update: like lena has suggested, pressing alt+enter suggests helpful options, including adding attribute to the list of custom attributes. However, wildcard suggestion didn't work for me: the below screenshot illustrates settings that make v-localize attrbute be recognized, but uk--prefixed attribute are still highlighted with warning:
You can add uk-* attributes to Custom HTML tag attributes list in HTML | Unknown HTML tag attribute inspection; the easiest way to do this is using Add to custom HTML attributes quickfix available on Alt+Enter:
Note that IDEA recognizes Vuikit components and directives out of the box - did you consider using it instead of pure UIKit?
When creating a Single Page Application, I have had the need to reuse CSS as a string.
The need was from a library requiring passing CSS as a string and needing to also use that CSS in the page.
To achieve this, I went through 2 routes, and both failed. Referring to the style tag element should be simple, so I'll focus on this in this issue, but if anyone can solve the other route, please let me know. Regards.
Attempted routes to solve issue:
Reference style tag element. Couldn't get this to work. Even has problems using global querying because of build process destroying ids.
I tried using raw-loader to directly import, but failed. I am using Typescript so tried to import as a string but failed again.
I was able to fix my main goal of reusing the same CSS by using external css in the style tag and importing the css as a string using raw-loader.
import css from !!raw-loader!./my-css.css
...
<style src="./my-css.css">
I still do not know how to get a safe reference to the style tag, but the above solves my issue.
* The reason for the style tag not being easily referenced even via document.querySelector is that the build process seems to strip attributes.
I'm learning to use modernizr. The documentation says it checks for resize attribute and it returns a cssresize class if that feature is supported, or a no-cssresize feature if it's not.
It returns neither value in the list of classes assigned to the html element.
To get the modernizr js file, I clicked on every single option on the download page.
Is this a bug or am I doing something wrong?
Hi I have tried every ways and means to load dojo page into ContentPane.
It seems That I am not able to do that. Correct me if I am wrong.
Looks like the only solution is through the creation and destroy of any widget while running
Clement
The dojo docs for dojox/layout/ContentPane (which allows references to script files) mentions your issue:
NOTE that dojo.require in script in the fetched file isn't recommended Many widgets need to be required at page load to work properly
#see http://dojotoolkit.org/api/1.8/dojox/layout/ContentPane
It looks like you just need to require these files in the parent widget.
I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.
Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.
Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?
CSS Usage is a great extension for firefox. It tells which css are currently used in a page.
Link: https://addons.mozilla.org/en-us/firefox/addon/css-usage/
There are two tools that I think might help you out.
helium is a javascript tool that will discover any unused css rules.
csscss is a source code analyzer that will report any duplication. I'm biased because I wrote csscss precisely because I couldn't find anything that did this. But many people seem to find it useful.
250kb is really such a big figure for just CSS files.
The templates generally have all the CSS required for all the pages in a single file.
I would suggest:
Do not cut your CSS code, they might be needed some point of time.
Instead i would suggest, break your CSS file into number of small files for different page stylings,
such as a different CSS for login page, different CSS file for home page, etc.
Read your own CSS and HTML code vigorously to find out which significant part of CSS code is used in which HTML section.
Update:
You may try Removed Unused CSS - CSS optimizer.
I personally did not use it just hope it works for you.