Skip to main content

Home/ CSS Evangelist/ Group items tagged selector

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

The Skinny on CSS Attribute Selectors | CSS-Tricks - 0 views

css-tricks.com/attribute-selectors

css selectors attribute selector attributes webdesign regex

shared by Vernon Fowler on 13 Aug 13 - No Cached
  • Vital to note is that you can use multiple attribute selectors in the same selector, which requires all of them to match for the selector itself to match.
  • This is where it starts getting more interesting. The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit. For example, "*=" means "match the following value anywhere in the attribute value."
Vernon Fowler

An introduction to LESS, and comparison to Sass | Smashing Coding - 0 views

coding.smashingmagazine.com/...to-less-and-comparison-to-sass

less sass css comparison webdesign css3 preprocessor

shared by Vernon Fowler on 25 Feb 14 - No Cached
  • The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.
  • With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.
  • Parametric Mixins Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
  • ...8 more annotations...
  • .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
  • The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.
  • Selector Inheritance Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format. .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* will render like so: */ .menu, .footer { border: 1px solid #ddd; }
  • With LESS, you can nest ids, classes and elements as you go.
  • You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.
  • Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units.
  • Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often.
  • Conditionals and Control This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.
yc c

Announcing cssess - The Bookmarklet That Finds Unused CSS Selectors | Razor Fast - 5 views

razorfast.com/...hat-finds-unused-css-selectors

bookmarklet selectors css webdev

shared by yc c on 23 Nov 10 - No Cached
  • yc c on 23 Nov 10
     
    helps you find unused CSS selectors on any site.
yc c

Sizzle JavaScript Selector Library - 2 views

sizzlejs.com

javacript css selector

shared by yc c on 04 Dec 09 - Cached
  • yc c on 04 Dec 09
     
    A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
yc c

HTML5 presentation - HTML5 Slides - 10 views

apirocks.com/...html5.html

HTML5 slides presentation whatis webdev

shared by yc c on 17 Apr 10 - Cached
  • yc c on 17 Apr 10
     
    Take a walk through the woods and learn about all things HTML5. Starting with the JS APIS (selector API, storage, appcache, web workers, web sockets, notifications, drag and drop, and geolocation). Then delve into the new HTML semantic tags, link relations, micro data, ARIA, forms, audio and video, Canvas, and WebGL. Finally, the holy trinity finishes with CSS and selectors, fonts, text, columns, stroking, opacity, HSL, rounded corners, gradients, shadows, backgrounds, transitions, transforms, and animations.
Vernon Fowler

Meet the Pseudo Class Selectors | CSS-Tricks - 0 views

css-tricks.com/pseudo-class-selectors

webdesign css web design selectors class

shared by Vernon Fowler on 18 Nov 12 - No Cached
  • You probably wouldn't want to drop cap every single paragraph on the page, but just the first one, so, p:first-child:first-letter { }
yc c

CSS Selectors testsuite - CSS3 . info - 0 views

www.css3.info/selectors-test

css css3 test tester

shared by yc c on 09 Mar 09 - Cached
  • yc c on 09 Mar 09
     
    A quick way to see if your browser supports CSS3 selectors (if you turn Javascript on first…)
Frederik Van Zande

SitePoint » How to Use Conditional Comments for Better CSS - 0 views

www.sitepoint.com/...tional-comments-for-better-css

conditional_comments css IE

shared by Frederik Van Zande on 12 Nov 08 - Cached
  • Frederik Van Zande on 12 Nov 08
     
    I'm a new contributor to the SitePoint blogs and will mostly be covering front-end development and Semantic Web technologies. I'm looking forward to participating in the SitePoint community! Sometimes it's the simplest things that go unnoticed for the longest time. Case in point, while catching up on some WSG reading tonight, I saw a link to Paul Hammond's Conditional classnames for Internet Explorer. In a sentence, he shows how using conditional comments to customize the element's class name can be used to simplify CSS selectors for a number of advantageous purposes.
mimi .

Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know [CSS Tutorials] - 0 views

www.sitepoint.com/...tomorrows-css-today

css operators

shared by mimi . on 14 Apr 08 - Cached
  • mimi . on 14 Apr 08
     
    new operator selectors with description and examples.
yc c

Use jQuery - Blog - Brosho 'Design in the Browser' jQuery Plugin - 4 views

usejquery.com/...n-in-the-browser-jquery-plugin

css online editor tool plugin jquery

shared by yc c on 17 Feb 10 - Cached
  • yc c on 17 Feb 10
     
    style your markup right in your browser with a build-in element selector and CSS editor. 
yc c

#eCSStender.org { content: "Homepage"; } - 1 views

ecsstender.org

css extension

shared by yc c on 05 Dec 09 - Cached
  • yc c on 05 Dec 09
     
    Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work... even in IE6. To see what you can use today, browse the extensions. To use the extensions, download eCSStender and include it and your extensions in your site.
Alexis Sgavel

Better Semantics with CSS Combinators & Selectors » HTML & CSS, Layout » Desi... - 0 views

designfestival.com/-css-combinators-and-selectors

css tips layout

shared by Alexis Sgavel on 31 May 11 - No Cached
  • Alexis Sgavel on 31 May 11
     
    I'm going to begin with a provocative claim: I believe CSS is one of the most difficult-​​to-​​master computer languages we have. It doesn't have a complex syntax and you certainly don't need a doctorate in IT to understand it. However, it's one of the only popular languages that isn't "logical" - and I mean that in the most literal sense.
Vernon Fowler

The Adjacent-Sibling Selector - 0 views

meyerweb.com/...200007a.html

css

shared by Vernon Fowler on 31 Mar 12 - Cached
  • H1 + *, H2 + *, H3 + * {margin-top: 0.125em;}
Vernon Fowler

The CSS Property Value inherit » Learn CSS3 | Cheat Sheet | CSS Tutorial | Se... - 0 views

reference.sitepoint.com/...inheritvalue

css properties browser support webdesign

shared by Vernon Fowler on 14 Jan 14 - Cached
  • Internet Explorer 7 and earlier versions don’t support the value inherit for any properties other than direction and visibility.
Vernon Fowler

Working With LESS and the Chrome DevTools - 2 views

dev.tutsplus.com/...the-chrome-devtools--net-36636

css webdesign tools browser less debug

shared by Vernon Fowler on 28 Jan 14 - No Cached
  • While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
  • Vernon Fowler on 28 Jan 14
     
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. | Difficulty: Beginner; Length: Quick; Tags: Tools & Tips, Tutorials, Web Dev
1 - 20 of 38 Next ›
Showing 20▼ items per page