Advanced CSS Selectors and Drupal

Drupal can be difficult to override at times in terms of styling unless you place your intercepts in a submodule’s PHP so creative CSS knowledge and implementation is a must to keep your site from looking “too Drupaly”.

One CSS technique that I have been using a bit lately that you don’t usually run into in systems where the HTML is more easily customizable is the title attribute selector. Warning – this is really a hack. But I think that it deserves a place in any Drupal Developer’s toolkit.

The title attribute looks like this:

a[title~=Request]{

/*css stuff goes here*/

}

This selector targets hyperlinks (a) that have a title that contains the word Request (case sensitive too). This selector will add whatever you add in the following curly brackets. There are other options too. See the w3s link at the bottom.

Image

The SS is really two SSs: one with the selector disabled so you see the element and one with it turned on. The element that needs to disappear is a link to the /user/password page. For whatever reason (this is Drupal and sometimes it takes so long to figure out the mystery that it becomes a Pyrrhic victory as the deadline is missed) this link will take you to a place where the UX sucks. The workaround is pretty easy though. Use the Password reset form and hide the link using CSS. But since the link has nothing special in its selectors that gets tough. So, use the title attribute selector. The green box in the SS is the form for passwords, BTW.

http://www.w3schools.com/css/css_attribute_selectors.asp

CSS for Mobile – IE Hacks

I’m testing on IE11, which is supposed to be standards compliant. And it is, except when it isn’t. Here is a great example of a hack that I had to use to make some sweet JQuery Superfish menu items behave in IE11.

#superfish-1 {
font-size: 98.9%;
float: left;
margin: -75px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
#superfish-1 {
font-size: 93%;
float: left;
margin: -77px -86px 15px;
padding: 0 0 7px 58px;
position: relative;
}
}

Browser Hacks for CSS, IE10+, Safari 5 specifically

No one ever really wants to take shortcuts and wind up with spaghetti. But sometimes you have to. IE 10/11 are great browsers and are much more compliant with standards, but today I still had to use a hack to get something simple done. And thanks to http://www.browserhacks.com/ for showing me the way.

for IE 10/11 you use this:

_::-ms-reveal,

at the beginning of your selector. the selector will remain the exact same but it will only be interpreted by IE10+

so this is the original:

.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/

font-size:104%;
}

and this is what you have afterwards to be interpreted only by IE.

_::-ms-reveal,.sf-menu.sf-style-default a {/*092713 hack for IE10 and superfish super menu*/
font-size:104%;
}

Note that the comment is mine and not needed. the only thing being changed is the font size. simple change but effective for a situation where I COULD NOT get the selector to work consistently despite all claims by MS.

This one works for Safari in that it doesn’t apply itself to Chrome, which would be the usual behavior.

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari only override */
::i-block-chrome,.sf-menu.sf-style-default a {
padding-bottom: 10px;
padding-right: 23px;
font-size: 100%}
}

You can see that the only important part is where it blocks chrome. This should work with any selector