Full list of possible classnames added by Modernizr? - modernizr

Where can I find such a full list?
I can tell there are .js and .no-js , .touch and .no-touch.
But .opacity -- is there .no-opacity or just missing .opacity means no support? This is just an example. A full list helps me a lot in writing code for those devices that I don't have.

All Modernizr detects will add .<feature> if supported and .no-<feature> if not. The set of detects depends on the custom build settings you chose in the downloader.
In the source of every Modernizr build, there's a URL in the comment at the top, which looks something like this:
Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-...
which lists all of the detects which have been included. So if fontface is in this list, you know that Modernizr will either add .fontface or .no-fontface depending on the detection result.

Related

Add a warning directive at the top of every page on a Sphinx RTD site

I'd like to add a simple warning directive at the top of every page on a Sphinx RTD site:
.. attention::
The next major release of this project will launch on X date.
In the meantime, we're looking for feedback.
If you'd like an early preview, please reach out at someemail#someaddress.com!
What's the simplest way to do this? I'm using the sphinx_rtd_theme.
I can see how to add a block using the extrabody block, but it appears outside the main content area and is positioned and styled totally independently.
Ideally, I'd want this block to show up at an attention directive just below the breadcrumbs on every page.
You could add this to the conf.py Sphinx configuration file:
rst_prolog = """.. attention::
The next major release is imminent.
"""
and it will be included at the beginning of every source file that is read ‒ see https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-rst_prolog.
F-string literals work too, so f'This is release #{release}' will substitute that variable value.

Angular5 pass DOM object to ng-content

I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.

How to remove modules not used in quilljs

We are using Quill for basic formatting (Bold, Italic, Link, BlockQuote). However Quill.min.js is the largest file that we've in our page.
We are looking to cut the size of the file by including the necessary modules only (for e.g. remove Syntax and Formula).
What is the way to get them removed? Do we need to setup the environment as described in Development page? Would it be possible to comment or remove the codes in quill.js? Appreciate any guidance
You can use quill.core.js and quill.core.css instead which will not have extra modules like Syntax and Formula. These files are not minified for you however. If you want to customize further then you will have to build Quill yourself.

Use Grunt to make DOM changes

So I want to use Lazysizes (lazy loading responsive images). Included in my Grunt stack is Responsive Images Extender, which outputs responsive image code (srcset) from simply including an "img" tag with a "src" attribute. Lazysizes requires the "data-srcset" attribute in replace of the "srcset" attribute, however. I added a script to my page that changes the "srcset" attributes to "data-srcset" attributes, but this isn't ideal as images are are already downloaded at runtime. It would be ideal if I could change the tags with Grunt, as there is no advantage in changing them live.
This seems like a very common thing, but I cannot find a good way to do it. String replace doesn't seem like an ideal solution, since it can cause problems if I ever use "srcset=" in my code.
I gave the grunt-responsive-images-extender a major makeover and added the possibility to change the attribute name of srcset to anything you want (data-srcset in your case) via the srcsetAttributeName option.
There is a grunt tans called dom_munger. With dom_munger you can change HTML attributes and do a lot of interesting stuff; however I cannot find a way to change an attribute name to another thing. Perhapse you can have a better luck checking it.

Joomla : Which module is this part of?

I am working on Joomla 1.5 right now and was wondering if there is a way to figure out, from the UI, on which module this is part of ? Eg, there is a picture viewer on the home page and I want to know which module is triggering it.
I do it the hard way no, where I goto all modules and check if each had anything to do with it. But was wondering if there is an easier, faster way.
Thank you :)
In Joomla 1.5 you can simply add ?tp=1 to the url to force the system to show you the template positions. You should just about be able to make out the name of the position in question. From there go to the module manager and filter the list by position.
It shouldn't be too difficult to figure out - the module will have rotator, slideshow or similar in its name/type.
It is probably set to show on the home menu item only too.
In my experience, this is an issue with most CMS - Drupal, Wordpress, and Joomla included. And it can be very frustrating. My approach is normally:
Search the module listing for something likely. So, in your example, I'd search for 'picture', 'viewer' 'gallery', etc. and, hopefully, a likely-looking modue would turn up in the listing. Usually, viewing its settings screen makes it obvious whether that module is the relevant one or not.
If that fails, I usually look at the source (easiest with firebug), and identify something that is likely to be fairly unique - e.g. a class name or a specific attribute in the markup. Once I have that, I resort to find/grep on the command line to identify the origin.
If you find yourself with a lot of extensions, and this becomes a regular problem, you could think about modifying templates to include a comment that identifies their module.

Resources