I am setting up some content blockers (https://developer.apple.com/documentation/safariservices/creating_a_content_blocker)
The HTML I am testing on looks something like this:
<div class="<random>">
<div>
<div>
<div>
<a class="bad" />
Now, I am wondering if I can have a CSS selector that selects on .bad but then removes the entire .random div block.
I have tried things like:
{
"action": {
"type": "css-display-none",
"selector": "div > div > div > div >a[href*='speedtest.net']"
},
"trigger": {
"url-filter": "^https?:\/+([^\/:]+\\.)?google.*[:\/]"
}
}
and div:has(a).
Nothing seems to work.
Anyone know if its possible? I can't even find anywhere that says what apple supports for this (CSS4?)
Update:: has is now supported in Safari and Safari iOS. source: caniuse
There is currently no parent selector in css even though it is one of the most requested CSS feature.
The simple reason for the lack of implementation yet is performance issues.
https://snook.ca/archives/html_and_css/css-parent-selectors
The closest thing we have to a parent selector in CSS for now is :focus-within which will match an element if the element or any of its descendants is focused. However it is of no use in your case.
The proposed implementation of a parent selector as you mentioned is :has and is part of the level 4 of CSS selectors.
https://www.w3.org/TR/selectors-4/
Although it isn't implemented yet in any browser, it is now part of the technical preview for Safari so we might get it some day.
However it is not yet part of the technical preview for iOS and that might still take a lot of time.
https://caniuse.com/css-has
Even though there is no CSS parent selector, what you are describing can be easily achieved through Javascript in your Safari extension.
However you will need to give permissions to your Safari extension to inject scripts in the web page.
The users will have to accept the permissions. If they refuse you won't be able to access the page DOM through javascript.
You can do that by going in the manifest.json of your Xcode project : AppName => Shared (Extension) => Ressources => manifest
In content_scripts you will need to add
"content_scripts": [{
"js": [ "content.js" ],
"matches": [ "<all_urls>" ]
}]
You can also select the sites you want your extension to have access to with regular expressions like you did previously.
https://developer.apple.com/documentation/safariservices/safari_web_extensions/managing_safari_web_extension_permissions
Then in the content.js file you can add your javascript code to edit the web pages as you please.
Here is a function you could use to remove the parent of the bad elements:
const removeBadElementParent = () =>{
const badElements = document.querySelectorAll('.bad-class-name')
if(badElements.length === 0) return;
badElements.forEach(element =>{
if(!element instanceof HTMLElement) return;
const parent = element.parentElement;
if(!parent instanceof HTMLElement) return;
parent.style.display = 'none'
})
}
You don't want to use it immediately but only when the DOM has loaded so you will need to call it like this:
if( document.readyState !== 'loading' ) {
removeBadElementParent();
} else {
document.addEventListener("DOMContentLoaded", function(event) {
removeBadElementParent();
});
}
However most website make changes to the DOM and might add the bad elements after the DOMContentLoaded event has fired. So you will need to add a mutation observer to check when the DOM is changed:
const onDOMMutation = (callback) =>{
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
const observer = new MutationObserver(function(mutations, observer) {
callback();
});
observer.observe(document, {
subtree: true,
attributes: true
});
}
And you can call it like this instead of calling directly the removeBadElementParent function:
if( document.readyState !== 'loading' ) {
onDOMMutation(removeBadElementParent);
} else {
document.addEventListener("DOMContentLoaded", function(event) {
onDOMMutation(removeBadElementParent);
});
}
https://developer.apple.com/documentation/safariservices/safari_app_extensions/injecting_a_script_into_a_webpage
I want to create stories using both Typescript and MDX, therefore I have in my main.js:
module.exports = {
stories: ['../src/**/*.stories.(mdx|ts)'],
addons: ['#storybook/addon-docs', 'storybook-addon-preview']
};
However I don't want to have "Docs" tab next to "Canvas". How do I remove it? Without '#storybook/addon-docs' MDX story is not displayed.
Put this in preview.js:
export const parameters = {
previewTabs: {
'storybook/docs/panel': {
hidden: true
}
}
};
Used in Storybook version 6.0.x
I am currently using #storybook/angular#6.0.21 and the previous answer unfortunately did not work for me. I was able to find a solution in the storybook DocsPage documentation.
The relevant section:
You can replace DocsPage at any level by overriding the docs.page parameter:
- With null to remove docs
- With MDX docs
- With a custom React component
I was able to completely remove the DocsPage for a single story like this:
export const myStory = () => ({
moduleMetadata: MODULE_METADATA,
component: MyComponent,
});
myStory.parameters = {
docs: { page: null },
};
I'm using the vue-cli 3 and want to generate background-image paths. Therefore I'm using the style data bind within an v-for-loop.
the component:
<template>
<ul>
<li v-for="(tool, index) in tools" :key="index">
</li>
</ul>
</template>
<script>
export default {
props: {
tools: Array,
}
}
</script>
The images are in this folder: src/assets/icons/xxx.svg
The problem is, that the generated image path seems to be incorrect but I can't find the mistake.
That's because webpack is not parsing any path inside the HTML(he's not that smart -yet-).
Anyway, you could trick webpack to get the URL for you. Doesn't look really like the best solution to me, but will answer your question.
Just create a computed property for a new list containing all the tools with their image paths. The trick is letting webpack parse the URL path for you in that object, then reference it in your HTML
Note: I supposed each item in the tools array is an unique string.
<template>
<ul>
<li v-for="tool in items" :key="tool.name">
</li>
</ul>
</template>
<script>
export default {
props: {
tools: Array,
},
computed: {
items () {
return this.tools.map(tool => {
return {
name: tool,
// the trick is letting webpack parse the URL path for you
img: require(`#/assets/icons/${tool}.svg`)
}
})
}
}
}
</script>
I'm working on a project where I'm trying to use some 5 custom fonts.
I use webfont.js library so that I can time my initialisation the way I want to.
However, I notice that I have an intermittent issue, whereby webfont.js will fail loading all 5 fonts 75% of the time. If I ignore the error (inactive handler) and just resume loading my site I can see all custom fonts fine.
This is annoying because webfont.js takes around 4 seconds to raise the inactive event and so the user just sees the blank page while this is happening.
How do I fix (or at least debug) this?
This is my setup (util.js):
var mutexFontsLoaded = $.Callbacks("memory once");
WebFontConfig = {
custom: {
families: ['Chennai-Regular', 'Chennai-Light', 'Chennai-Bold', 'Quicksand-Bold', 'Segoe-Print'],
urls: ['css/fonts.css']
},
loading: function () { console.log("Loading fonts.."); },
active: function () { mutexFontsLoaded.fire(); },
fontinactive: function (font, fvd) { console.log("Could'nt load " + font + " font"); },
inactive: function () { console.log("All fonts failed loading..\n\rTrying to load site anyway.."); mutexFontsLoaded.fire(); }
};
Followed by the Web Font Loader library - 1.5.1
Then in my main script:
$(document).ready(function () {
mutexFontsLoaded.add(function()
{
application.init();
});
});
Debugging the webfont.js library from google's CDN made me see the issue.
Webfont.js injects a <span> with a test string into the <body> DOM element. It then sets the custom font on this span and repeatedly calculates width of the <span> to test for any changes. If it captures a change then it assumes the custom font has loaded. If no change is detected within a timeout then it signals failure.
In my case <body> element was hidden with display: none; because I only wanted to show the page once I knew all the elements are downloaded. Because of this the injected <span> never changed its calculated width.
Finally fixed!
What is the proper/accepted way to use separate stylesheets for the various views my application uses?
Currently I'm placing a link element in the view/partial's html at the top but I've been told this is bad practice even though all modern browsers support it but I can see why it's frowned upon.
The other possibility is placing the separate stylesheets in my index.html's head but I would like it to only load the stylesheet if its view is being loaded in the name of performance.
Is this bad practice since styling won't take effect until after the css is loaded form the server, leading to a quick flash of unformatted content in a slow browser? I have yet to witness this although I'm testing it locally.
Is there a way to load the CSS through the object passed to Angular's $routeProvider.when?
I know this question is old now, but after doing a ton of research on various solutions to this problem, I think I may have come up with a better solution.
UPDATE 1: Since posting this answer, I have added all of this code to a simple service that I have posted to GitHub. The repo is located here. Feel free to check it out for more info.
UPDATE 2: This answer is great if all you need is a lightweight solution for pulling in stylesheets for your routes. If you want a more complete solution for managing on-demand stylesheets throughout your application, you may want to checkout Door3's AngularCSS project. It provides much more fine-grained functionality.
In case anyone in the future is interested, here's what I came up with:
1. Create a custom directive for the <head> element:
app.directive('head', ['$rootScope','$compile',
function($rootScope, $compile){
return {
restrict: 'E',
link: function(scope, elem){
var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
elem.append($compile(html)(scope));
scope.routeStyles = {};
$rootScope.$on('$routeChangeStart', function (e, next, current) {
if(current && current.$$route && current.$$route.css){
if(!angular.isArray(current.$$route.css)){
current.$$route.css = [current.$$route.css];
}
angular.forEach(current.$$route.css, function(sheet){
delete scope.routeStyles[sheet];
});
}
if(next && next.$$route && next.$$route.css){
if(!angular.isArray(next.$$route.css)){
next.$$route.css = [next.$$route.css];
}
angular.forEach(next.$$route.css, function(sheet){
scope.routeStyles[sheet] = sheet;
});
}
});
}
};
}
]);
This directive does the following things:
It compiles (using $compile) an html string that creates a set of <link /> tags for every item in the scope.routeStyles object using ng-repeat and ng-href.
It appends that compiled set of <link /> elements to the <head> tag.
It then uses the $rootScope to listen for '$routeChangeStart' events. For every '$routeChangeStart' event, it grabs the "current" $$route object (the route that the user is about to leave) and removes its partial-specific css file(s) from the <head> tag. It also grabs the "next" $$route object (the route that the user is about to go to) and adds any of its partial-specific css file(s) to the <head> tag.
And the ng-repeat part of the compiled <link /> tag handles all of the adding and removing of the page-specific stylesheets based on what gets added to or removed from the scope.routeStyles object.
Note: this requires that your ng-app attribute is on the <html> element, not on <body> or anything inside of <html>.
2. Specify which stylesheets belong to which routes using the $routeProvider:
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'
})
.when('/some/route/2', {
templateUrl: 'partials/partial2.html',
controller: 'Partial2Ctrl'
})
.when('/some/route/3', {
templateUrl: 'partials/partial3.html',
controller: 'Partial3Ctrl',
css: ['css/partial3_1.css','css/partial3_2.css']
})
}]);
This config adds a custom css property to the object that is used to setup each page's route. That object gets passed to each '$routeChangeStart' event as .$$route. So when listening to the '$routeChangeStart' event, we can grab the css property that we specified and append/remove those <link /> tags as needed. Note that specifying a css property on the route is completely optional, as it was omitted from the '/some/route/2' example. If the route doesn't have a css property, the <head> directive will simply do nothing for that route. Note also that you can even have multiple page-specific stylesheets per route, as in the '/some/route/3' example above, where the css property is an array of relative paths to the stylesheets needed for that route.
3. You're done
Those two things setup everything that was needed and it does it, in my opinion, with the cleanest code possible.
#tennisgent's solution is great. However, I think is a little limited.
Modularity and Encapsulation in Angular goes beyond routes. Based on the way the web is moving towards component-based development, it is important to apply this in directives as well.
As you already know, in Angular we can include templates (structure) and controllers (behavior) in pages and components. AngularCSS enables the last missing piece: attaching stylesheets (presentation).
For a full solution I suggest using AngularCSS.
Supports Angular's ngRoute, UI Router, directives, controllers and services.
Doesn't required to have ng-app in the <html> tag. This is important when you have multiple apps running on the same page
You can customize where the stylesheets are injected: head, body, custom selector, etc...
Supports preloading, persisting and cache busting
Supports media queries and optimizes page load via matchMedia API
https://github.com/door3/angular-css
Here are some examples:
Routes
$routeProvider
.when('/page1', {
templateUrl: 'page1/page1.html',
controller: 'page1Ctrl',
/* Now you can bind css to routes */
css: 'page1/page1.css'
})
.when('/page2', {
templateUrl: 'page2/page2.html',
controller: 'page2Ctrl',
/* You can also enable features like bust cache, persist and preload */
css: {
href: 'page2/page2.css',
bustCache: true
}
})
.when('/page3', {
templateUrl: 'page3/page3.html',
controller: 'page3Ctrl',
/* This is how you can include multiple stylesheets */
css: ['page3/page3.css','page3/page3-2.css']
})
.when('/page4', {
templateUrl: 'page4/page4.html',
controller: 'page4Ctrl',
css: [
{
href: 'page4/page4.css',
persist: true
}, {
href: 'page4/page4.mobile.css',
/* Media Query support via window.matchMedia API
* This will only add the stylesheet if the breakpoint matches */
media: 'screen and (max-width : 768px)'
}, {
href: 'page4/page4.print.css',
media: 'print'
}
]
});
Directives
myApp.directive('myDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
css: 'my-directive/my-directive.css'
}
});
Additionally, you can use the $css service for edge cases:
myApp.controller('pageCtrl', function ($scope, $css) {
// Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
$css.bind({
href: 'my-page/my-page.css'
}, $scope);
// Simply add stylesheet(s)
$css.add('my-page/my-page.css');
// Simply remove stylesheet(s)
$css.remove(['my-page/my-page.css','my-page/my-page2.css']);
// Remove all stylesheets
$css.removeAll();
});
You can read more about AngularCSS here:
http://door3.com/insights/introducing-angularcss-css-demand-angularjs
Could append a new stylesheet to head within $routeProvider. For simplicity am using a string but could create new link element also, or create a service for stylesheets
/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
if( !angular.element('link#myViewName').length){
angular.element('head').append('<link id="myViewName" href="myViewName.css" rel="stylesheet">');
}
Biggest benefit of prelaoding in page is any background images will already exist, and less lieklyhood of FOUC
#sz3, funny enough today I had to do exactly what you were trying to achieve: 'load a specific CSS file only when a user access' a specific page. So I used the solution above.
But I am here to answer your last question: 'where exactly should I put the code. Any ideas?'
You were right including the code into the resolve, but you need to change a bit the format.
Take a look at the code below:
.when('/home', {
title:'Home - ' + siteName,
bodyClass: 'home',
templateUrl: function(params) {
return 'views/home.html';
},
controler: 'homeCtrl',
resolve: {
style : function(){
/* check if already exists first - note ID used on link element*/
/* could also track within scope object*/
if( !angular.element('link#mobile').length){
angular.element('head').append('<link id="home" href="home.css" rel="stylesheet">');
}
}
}
})
I've just tested and it's working fine, it injects the html and it loads my 'home.css' only when I hit the '/home' route.
Full explanation can be found here, but basically resolve: should get an object in the format
{
'key' : string or function()
}
You can name the 'key' anything you like - in my case I called 'style'.
Then for the value you have two options:
If it's a string, then it is an alias for a service.
If it's function, then it is injected and the return value is treated
as the dependency.
The main point here is that the code inside the function is going to be executed before before the controller is instantiated and the $routeChangeSuccess event is fired.
Hope that helps.
Awesome, thank you!! Just had to make a few adjustments to get it working with ui-router:
var app = app || angular.module('app', []);
app.directive('head', ['$rootScope', '$compile', '$state', function ($rootScope, $compile, $state) {
return {
restrict: 'E',
link: function ($scope, elem, attrs, ctrls) {
var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
var el = $compile(html)($scope)
elem.append(el);
$scope.routeStyles = {};
function applyStyles(state, action) {
var sheets = state ? state.css : null;
if (state.parent) {
var parentState = $state.get(state.parent)
applyStyles(parentState, action);
}
if (sheets) {
if (!Array.isArray(sheets)) {
sheets = [sheets];
}
angular.forEach(sheets, function (sheet) {
action(sheet);
});
}
}
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
applyStyles(fromState, function(sheet) {
delete $scope.routeStyles[sheet];
console.log('>> remove >> ', sheet);
});
applyStyles(toState, function(sheet) {
$scope.routeStyles[sheet] = sheet;
console.log('>> add >> ', sheet);
});
});
}
}
}]);
If you only need your CSS to be applied to one specific view, I'm using this handy snippet inside my controller:
$("body").addClass("mystate");
$scope.$on("$destroy", function() {
$("body").removeClass("mystate");
});
This will add a class to my body tag when the state loads, and remove it when the state is destroyed (i.e. someone changes pages). This solves my related problem of only needing CSS to be applied to one state in my application.
'use strict';
angular.module('app')
.run(
[
'$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
[
'$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/app/dashboard');
$stateProvider
.state('app', {
abstract: true,
url: '/app',
templateUrl: 'views/layout.html'
})
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html',
ncyBreadcrumb: {
label: 'Dashboard',
description: ''
},
resolve: {
deps: [
'$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'lib/jquery/charts/sparkline/jquery.sparkline.js',
'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
'lib/jquery/charts/flot/jquery.flot.js',
'lib/jquery/charts/flot/jquery.flot.resize.js',
'lib/jquery/charts/flot/jquery.flot.pie.js',
'lib/jquery/charts/flot/jquery.flot.tooltip.js',
'lib/jquery/charts/flot/jquery.flot.orderBars.js',
'app/controllers/dashboard.js',
'app/directives/realtimechart.js'
]
});
}
]
}
})
.state('ram', {
abstract: true,
url: '/ram',
templateUrl: 'views/layout-ram.html'
})
.state('ram.dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard-ram.html',
ncyBreadcrumb: {
label: 'test'
},
resolve: {
deps: [
'$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'lib/jquery/charts/sparkline/jquery.sparkline.js',
'lib/jquery/charts/easypiechart/jquery.easypiechart.js',
'lib/jquery/charts/flot/jquery.flot.js',
'lib/jquery/charts/flot/jquery.flot.resize.js',
'lib/jquery/charts/flot/jquery.flot.pie.js',
'lib/jquery/charts/flot/jquery.flot.tooltip.js',
'lib/jquery/charts/flot/jquery.flot.orderBars.js',
'app/controllers/dashboard.js',
'app/directives/realtimechart.js'
]
});
}
]
}
})
);