CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: selector

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

.warning {
  background-color: red;
}

It is often enough, you don’t need those:

html .warning
div .warning
div.warning, div > .warning
body p#myP.blue strong.warning

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own “namespace” to do that really simple. We have added a class to the html tag: “contoso-html”. Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

.contoso-html #s4-workspace { }

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This “namespace” made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn’t work. Don’t nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint “markup djungle”.

jQuery: select elements with a specific text

There are situations when you want to select only dom elements which only have a specific content. jQuery provides a beautiful selector :contains:

$("a:contains(Pages)")

But what if it isn’t enough to just get all the elements which contain some word?

Let’s check what we get if we traverse all anchors on http://sv.wikipedia.org containing “wiki”:

$("a:contains(wiki)").each(function(i) { console.log($(this).text()); });

There is another, a generic way, to filter out elements, and it is called “filter”. So a little regex check will do the trick.

$("a").filter(function() {
  return /look_for/i.test($(this).text());
}

To get an element with the exact text in a beatiful way, we have to create our own selector. I got an idea from a comment at old.nabble.com:

(function ($, undefined) {
    if ($ === undefined) {
        throw "Dependency: jQuery is not defined. Please check javascript imports.";
    }
    $.extend($.expr[':'],
    {
        // :textEquals(text)
        textEquals: function(current, index, metadata, elements) {
            var regex = new RegExp("^" + metadata[3] + "$");
            regex.ignoreCase = true;
            var text = current.textContent || current.innerText || jQuery(current).text() || "";
            return regex.test(text);
        }
    });
} (jQuery));

This selector is designed not to be case sensitive.

Hide my site link with css

Want to hide my site link without disabling social features.
my site link

Well, the simplest way to do it is to use css:

#mp1_0_0_Anchor { display: none; }

If you want to hide my profile instead, just hide #mp1_0_1_Anchor:

#mp1_0_1_Anchor {
    display: none;
}

As John and Vishal mentioned, it doesn’t work, because these IDs are generated dynamically. If you have to hide this link, you must use attribute selectors like:

.ms-MenuUIUL li[text='My Site'] { display: none;}
Disable the my profile feature
An even better solution is maybe to disable the ability to change the profiles. Just remove the permission to “user personalization…” for All authenticated users in User Profile Service.

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

SharePointDiver

SharePoint på ren svenska