Pro HTML5 Performance

This book deals with creating high-performance web sites. Its focus is large and high-volume sites.


Jay Bryant, Mike Jones


285 Pages

26522 Reads

56 Downloads

English

PDF Format

8.78 MB

HTML Learning

Download PDF format


  • Jay Bryant, Mike Jones   
  • 285 Pages   
  • 26 Feb 2015
  • Page - 1

    read more..

  • Page - 2

    read more..

  • Page - 3

    read more..

  • Page - 4

    read more..

  • Page - 5

    read more..

  • Page - 6

    read more..

  • Page - 7

    read more..

  • Page - 8

    read more..

  • Page - 9

    read more..

  • Page - 10

    9 ■ ■ ■ CHAPTER 2 Development Principles Having found a few principles to be helpful, we use them repeatedly throughout the book (and throughout our work outside the book, of course). These principles underlie everything we’re going to say in the book. Consequently, we thought we should delineate them here, before we move on to the chapters that deal with more read more..

  • Page - 11

    CHAPTER 2 ■ DEVELOPMENT PRINCIPLES 10 First, the HTML gets parsed into a DOM Tree, a.k.a. Document Object Model (DOM). That’s one reason why the first thing a browser does when it encounters a page is download the page’s HTML content. The other reason is that the HTML contains the references to all the other resources (style sheets, scripts, images, and so on) read more..

  • Page - 12

    11 CHAPTER 2 ■ DEVELOPMENT PRINCIPLES </script> In this example, we’re setting the styles for the element one at a time. First, the script sets the background color to red (forcing a redraw), then sets the width to 200px (forcing a second redraw), and then sets the text color to white (forcing a third redraw). And while you could certainly still use JavaScript read more..

  • Page - 13

    CHAPTER 2 ■ DEVELOPMENT PRINCIPLES 12 Listing 2-3 shows the HTML that provides the content for this article stack. Listing 2-3. The HTML Behind Our Article Stack <article class="browserArticle"> <h1 class="subTitle accentColor1">Chrome's Evil Twin Brother</h1> <span class="evilChromeLogo"></span> <p>The logo is darker because they couldn't make it look read more..

  • Page - 14

    13 CHAPTER 2 ■ DEVELOPMENT PRINCIPLES .accentColor1 { color: #1C70AD; } The key style in Listing 2-2 is the .browserArticle rule. It specifies a width of 200 pixels and no height, giving us a box 200 pixels wide that will extend to the height of its content. It also specifies a left padding value of 48 pixels. We’ll use that 48 pixels as the place to read more..

  • Page - 15

    CHAPTER 2 ■ DEVELOPMENT PRINCIPLES 14 The trouble is that a margin is outside the box of the element that defines the margin. Padding is within the box of the element that defines the padding. Consequently, while both of these rulesets work on modern browsers, the ruleset in Listing 2-5 is more likely to encounter inconsistencies on older browsers. As we discuss in read more..

  • Page - 16

    15 CHAPTER 2 ■ DEVELOPMENT PRINCIPLES width: 100px; height: 100px; background-color: #2067f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5), to(#154096)); background-image: -webkit-linear-gradient(top, #2067f5, #154096); background-image: -moz-linear-gradient(top, #2067f5, #154096); background-image: -ms-linear-gradient(top, #2067f5, #154096); read more..

  • Page - 17

    CHAPTER 2 ■ DEVELOPMENT PRINCIPLES 16 property it doesn’t understand. Thus, we can put in CSS3 progressive enhancements, and IE8 (for example) will ignore them (see Listing 2-7). Before we talk more about feature detection, let’s consider a common alternative. Many sites try to detect which browser each visitor uses and present a page optimized for that browser. read more..

  • Page - 18

    17 CHAPTER 2 ■ DEVELOPMENT PRINCIPLES Before web developers began to embrace separation of concerns, we’d use HTML tables as design elements, use JavaScript to generate large portions of the HTML, and otherwise do whatever seemed useful at the time. This approach was so pragmatic in character that it was only maintainable if the page had been written within the previous read more..

  • Page - 19

    CHAPTER 2 ■ DEVELOPMENT PRINCIPLES 18 CSS CSS is the master of presentation. For presentation purposes, CSS offers the best performance, especially if you’re mindful of using the correct selectors (which we’ll get to in Chapter 3). In addition to the existing benefits of CSS, CSS3 lets you reduce your dependency on images to assist in presentation of rounded corners, read more..

  • Page - 20

    19 CHAPTER 2 ■ DEVELOPMENT PRINCIPLES Listing 2-8. CSS for slide-out animation .browserArticle { position: relative; width: 200px; height: 45px; padding-left: 48px; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; read more..

  • Page - 21

    CHAPTER 2 ■ DEVELOPMENT PRINCIPLES 20 Whenever possible, we prefer to offload interaction functionality to CSS because browsers can use their native code to handle it, which enables better performance. Also, getting the same functionality from CSS often requires less code than the JavaScript equivalent. Summary In this chapter, we’ve covered some helpful information for improving read more..

  • Page - 22

    21 ■ ■ ■ CHAPTER 3 Performance Guidelines Our experience and research have let us create a set of performance guidelines that we keep in mind when working on web sites. As it happens, we find that our guidelines mostly match those of Yahoo and Google and other companies that do best-in-breed web development. With one exception, we believe these rules can make any read more..

  • Page - 23

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 22 In our minds, a 1% drop in sales for every 100 milliseconds is a huge impact. Clearly, page load time must be a key concern for web developers. The Guidelines Each of the following sections describes a particular guideline (in order of impact on page load time): Make Fewer HTTP Requests Use a Content Delivery Network (CDN) Avoid read more..

  • Page - 24

    23 CHAPTER 3 ■ PERFORMANCE GUIDELINES The browser-side restriction that developers often fail to consider is how many resources a browser can load at a time. The HTTP 1.1 specification says, “A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.” In recent years, most browsers have exceeded this suggestion. Many browsers currently read more..

  • Page - 25

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 24 Notice that the HTML loaded in 327 milliseconds. In other words, the text content of a page comes down very quickly. Then notice that the other files (mostly images from images.apple.com) arrived in groups. That grouping pattern is the direct result of the number of parallel connections the browser can open. It’s a bit like a read more..

  • Page - 26

    25 CHAPTER 3 ■ PERFORMANCE GUIDELINES You can put resources into multiple hosts (such as www.apple.com and images.apple.com, in the example shown in Figure 3-2.) However, that practice improves performance only up to a point, as the cost of additional DNS lookups leads to rapidly diminishing returns. Combine Resource Files The result of the parallel connection problem is that read more..

  • Page - 27

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 26 company’s logo is red and gray, the firm’s marketing people may have created a bunch of images that use the company color scheme for navigation and other purposes. In that case, you might gain substantial size savings by having a file for those images and restricting the color range to red and gray. If you have lots of read more..

  • Page - 28

    27 CHAPTER 3 ■ PERFORMANCE GUIDELINES Listing 3-2 shows the CSS class. Listing 3-2. CSS for a Sprite . arrowPrev { width: 22px; height: 25px; background-image: url(googlesprite.png); background-position: -6px -13px; background-repeat: no-repeat; } The CSS specifies the sprite, the width and height of the viewport that contains the image within the sprite, and the read more..

  • Page - 29

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 28 ■ Note If a content delivery network won’t help you, then it’s not really the second-best performance tip. We left it here, though, because, if you do need one, a CDN is second only to lowering the number of HTTP requests in boosting page-load performance. Avoid Empty src or href Attributes The pattern that we’ve read more..

  • Page - 30

    29 CHAPTER 3 ■ PERFORMANCE GUIDELINES Of course, you also want to write to your log files every time you catch an empty attribute. If you get a lot of them, you definitely want to find out why it happens and fix it. Add Expires Headers You should add an Expires header to all your static components (images, stylesheets, scripts, flash, PDF, and so on). Adding read more..

  • Page - 31

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 30 The one problem with compression is that there are still a few browsers (and, more rarely, proxies) that mishandle it. For that reason, you need to add a Vary field to the header, so that those browsers and proxies can negotiate for uncompressed content. Adding the Vary field to the header is done with an instruction in the read more..

  • Page - 32

    31 CHAPTER 3 ■ PERFORMANCE GUIDELINES not all browsers honor the DEFER attribute. The second is that the contract for using the DEFER attribute is that any script with that attribute does not use document.write. Consequently, you can’t use the DEFER attribute with scripts that do use document.write. (Later in this chapter, when we talk about why rearranging the DOM read more..

  • Page - 33

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 32 unused rules also makes the CSS file smaller, which allows the browser to more quickly fetch it and saves bandwidth. It can be tempting to make a single stylesheet for an entire site and use it even when some pages don’t use all the rules in the stylesheet. However, doing so is usually a mistake because those pages read more..

  • Page - 34

    33 CHAPTER 3 ■ PERFORMANCE GUIDELINES /* We set a minimum height in case there's not enough content to make the box big enough to house the image. We use the height of the image plus 3 for the top offset. */ min-height: 39px; } .subTitle { font-size: 18px; } .evilChromeLogo { background: url(images/evilChromeLogo.png) no-repeat 0 0; read more..

  • Page - 35

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 34 Use Tables Only for Tabular Content Specify a Character Set Don’t Rearrange the DOM Specify Dimensions for Images You should specify dimensions for img elements. When a browser is creating its area tree, it sets aside an area for each element. If you don’t specify the dimensions of an img element, the browser is likely to read more..

  • Page - 36

    35 CHAPTER 3 ■ PERFORMANCE GUIDELINES three redraw operations. Instead, create a string that contains the HTML for the list you want to insert, and then insert that string all at once. That way, you force just one redraw operation. A similar principle applies to dynamically setting style on an element. Don’t set each style element in your JavaScript. Instead, create a read more..

  • Page - 37

    CHAPTER 3 ■ PERFORMANCE GUIDELINES 36 Finally, we strongly recommend a periodic review of web pages while thinking about how a browser loads a page. No one can keep that in mind all the time, because, as developers, we’re always bumping into some weird little problem that requires our undivided attention. Consequently, stopping to do a page-load review every once in read more..

  • Page - 38

    37 ■ ■ ■ CHAPTER 4 Responsive Web Design In keeping with our trend of pointing out techniques that enhance web developer performance, possibly one of the biggest time-savers for developers is the idea of “One Codebase”. Essentially, it’s the idea of being able to use the same code to deliver an experience to desktop browsers, tablets, and mobile devices. read more..

  • Page - 39

    CHAPTER 4 ■ RESPONSIVE WEB DESIGN 38 The workhorse of this approach is CSS3’s Media Queries. However, by adding techniques for resizing images and the concept of a flexible grid, you can really supercharge your One-Codebase approach. The rest of this chapter examines how to create a responsive web page. CSS3 Media Queries W3C says, “A media query consists of a media read more..

  • Page - 40

    39 CHAPTER 4 ■ RESPONSIVE WEB DESIGN Let’s look at a slightly more complex example. The following are four design intentions to enable our faux site to fit a desktop browser, a tablet browser, and a mobile browser in both tall and wide orientation. Figure 4-1. Our faux site on a desktop browser read more..

  • Page - 41

    CHAPTER 4 ■ RESPONSIVE WEB DESIGN 40 Figure 4-2. Our faux site on a tablet Figure 4-3. Our faux site on a mobile phone held horizontally read more..

  • Page - 42

    41 CHAPTER 4 ■ RESPONSIVE WEB DESIGN Now let’s see how media queries change the following HTML into the four design intentions on the fly. ■ Note If you want to test the Mobile Tall intention, make sure to use a browser other than Firefox. It won’t trigger the smallest viewport in the desktop browser. The HTML Listing 4-2 shows the HTML source for our read more..

  • Page - 43

    CHAPTER 4 ■ RESPONSIVE WEB DESIGN 42 <body> <header class="heroWrap" ></header> <nav class="mainNav clearfix"> <ul> <li> <a href="">Menu 1</a> </li> <li> <a href="">Menu 2</a> read more..

  • Page - 44

    43 CHAPTER 4 ■ RESPONSIVE WEB DESIGN Chambray organic art party seitan, post-ironic squid authentic quinoa echo park twee wolf fap readymade fingerstache iphone. Brunch 8-bit put a bird on it butcher +1 beard cray, sriracha cardigan chambray sustainable DIY. Polaroid organic seitan thundercats pour-over truffaut DIY kogi pop-up lo-fi. read more..

  • Page - 45

    CHAPTER 4 ■ RESPONSIVE WEB DESIGN 44 color: #4B6E93; } .contentWrap { float: right; width: 64%; background: #D6D6D6; padding: 3%; min-height: 200px } .contentSection { width: 64%; padding: 3%; float: left; } .tertSection { width: 20%; padding: 3%; float: right; background: #82BEFF; } .pageFooter { background: black; padding: read more..

  • Page - 46

    45 CHAPTER 4 ■ RESPONSIVE WEB DESIGN /* Mobile Layout */ @media only screen and (max-width: 767px) { body { width: 252px; } .tertSection { display: none; } .sideNav { display: none; } .contentWrap { width: auto; float: none; } .contentSection { float:none; width: auto; } } /* read more..

  • Page - 47

    CHAPTER 4 ■ RESPONSIVE WEB DESIGN 46 The CSS Way A technique created by Richard Rutter uses the simple CSS property ‘max-width’ to do the heavy lifting. Listing 4-4 shows just how simple it is. Listing 4-4. Setting the max-width Property for an Image. img { max-width: 100% } Honestly, it’s that simple. The only trick is not to declare a height or width in the read more..

  • Page - 48

    47 CHAPTER 4 ■ RESPONSIVE WEB DESIGN As soon as rwd-images.js (I think they meant: responsiveimgs.js) loads, it tests the screen width, and if it’s large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called “/ rwd-router/”. As these requests reach the read more..

  • Page - 49

    CHAPTER 4 ■ RESPONSIVE WEB DESIGN 48 Predefined classes that fit perfectly on the grid of columns can be set on the elements. The classes are something like “colOne”, “colTwo”, on to “colTwelve”. To be clear, we want to point out that “colOne” doesn’t refer to the first column. It refers to an element that is one column wide, which might very read more..

  • Page - 50

    49 CHAPTER 4 ■ RESPONSIVE WEB DESIGN Adding Flexibility A fine example of a flexible grid system can be found at http://cssgrid.net/. That grid system is based on percentages. Consequently, the grid flexes to the size of the window. Now all the div elements you created with the class of “colFour” scale with the browser width. Then you can use the Media Queries to read more..

  • Page - 51

    51 ■ ■ ■ CHAPTER 5 Understanding the Web Reuse Pattern When Mike first started working for one of the five largest e-commerce sites in the United States, he came up with a development approach that led to a faster development cycle and a much faster update cycle (or decreased maintenance time, to put it differently). This site has a lot of products and many ways read more..

  • Page - 52

    CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN 52 When Mike examined these design intentions, he couldn’t help noticing that they all had similar items that needed only to have their layouts changed. He quickly realized that this was a job for CSS, not for a bunch of separate views. ■ Note Mike would like to give credit to Nicole Sullivan, who went read more..

  • Page - 53

    53 CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN As you can see, all of these design intentions share an image, a title, and a description. Further, a large majority also share pricing info and a call to action button. Instead of creating different snippets of HTML to reuse throughout our large and high-bandwidth e-commerce site, we created a dynamic master product read more..

  • Page - 54

    CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN 54 Listing 5-1. The HTML for a Product Stack <section class="productStackWrap" > <img class="psImage" src="images/image.jpg" /> <article class="psArticleWrap"> <h1 class="psTitle">Title</h1> <ul class="psPriceWrap"> <li> <span read more..

  • Page - 55

    55 CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN var Description = "Sartorial williamsburg small batch helvetica mixtape wayfarers. Art party biodiesel."; var showPricingWrap = true; var showDescBullets = true; var showButton = true; } <section class="productStackWrap @Treatment" > <img class="psImage" src="@ImagePath" /> <article read more..

  • Page - 56

    CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN 56 ■ Note We’re leveraging CSS nesting to accomplish our heavy lifting. We’re relying on CSS failing gracefully. That is, if the browser’s CSS rendering engine doesn’t understand something in our CSS, it will ignore it (so long as it’s syntactically correct). We use CSS nesting a lot. Listing 5-3 shows read more..

  • Page - 57

    57 CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN display: inline-block; width: 75px; text-align: right; font-weight: 700; } .spTotalPrice { color: green; } .spDescriptionWrap p { line-height: 150%; } .psCTA { background: green; color: white; padding: 5px 0; width: 120px; display:block; border: 0; text-align:center; font-size: 20px; read more..

  • Page - 58

    CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN 58 Listing 5-5 shows the CSS for treatment A1. Listing 5-5. CSS for Treatment A1 /* Treatment A1 */ .psTreatmentA1 { width: 310px; } .psTreatmentA1 .psImage { width: 80px; height: 112px; float:left; } .psTreatmentA1 .psTitle { margin-left: 100px; } .psTreatmentA1 .psPriceWrap { margin-left: 100px; } .psTreatmentA1 .psCTA { read more..

  • Page - 59

    59 CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN margin: 0 auto; } .psTreatmentA1 .psPriceWrap { text-align: right; } Similarly, we can add the class “psTreatmentB1” to r earrange the content to match another design. Figure 5-4 shows the result. Figure 5-4. Treatment B1 Listing 5-6 shows the CSS for treatment B1. Listing 5-6. CSS for Treatment B1 /* Treatment B1 */ read more..

  • Page - 60

    CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN 60 top: 20px; } .psTreatmentB1 .psPriceWrap { text-align: left; } Again, we can add the class “psTreatmentC1” to r earrange the content to match a third design. Figure 5-5 shows the result. Figure 5-5. Treatment C1 Listing 5-7 shows the CSS for treatment C1. Listing 5-7. CSS for Treatment C1 /* Treatment C1 */ read more..

  • Page - 61

    61 CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN .psTreatmentC1 .psImage { width: 386px; height: 287px; display: block; margin-bottom: 20px; } .psTreatmentC1 .psPriceWrap { text-align: left; margin-left: 110px; } .psTreatmentC1 .psTitle { text-align: center; font-size: 27px; } We’ll finish our example with the one of the simplest designs. Figure 5-6 shows that result. Figure 5-6. Treatment D1 read more..

  • Page - 62

    CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN 62 .psTreatmentD1 .spDescriptionWrap p { margin-bottom: 0; } .psTreatmentD1 .psPriceWrap, .psTreatmentD1 .psCTA, .psTreatmentD1 .descBulletsUL { display:none; /* If we're using our server-side logic, we wouldn't need this as these extraneous HTML elements wouldn't be on the page. */ } Some Final Observations on Web Reuse Think read more..

  • Page - 63

    63 CHAPTER 5 ■ UNDERSTANDING THE WEB REUSE PATTERN It ensures consistent branding across a large, complex site. To many companies, their brand is their most precious asset, and consistent treatment for the branding assets (logos, slogans, etc.) is an essential part of web site development and maintenance. It easily creates a consistent experience across the whole site. In read more..

  • Page - 64

    65 ■ ■ ■ P A R T 3 ■ ■ ■ Building a Web Site In this section, we apply all of the performance advice given in Chapters 2 through 5 to an actual web site (http://clikz.us). Because e-commerce sites generally require more complex layout than blogs or news listings, we use an e-commerce site as our example. Also, when we conceived of the book, we read more..

  • Page - 65

    PART 3 ■ BUILDING A WEB SITE 66 met, and that work gave us the idea of writing a book about it). We also discuss when to segregate CSS from JavaScript and when to combine them (and how to do so). We next discuss why we developed the link control and then show how we did it. We detail the functions and styles that constitute the control. (We added read more..

  • Page - 66

    67 ■ ■ ■ CHAPTER 6 Page Template Throughout Section II of this book, we’re going to focus on creating a sample site to demonstrate the principles we discussed in Section I. Reading about how something works only gets most people started on true understanding. Seeing it in action is a big step toward mastery. (Of course, to fully learn how to do something, you read more..

  • Page - 67

    CHAPTER 6 ■ PAGE TEMPLATE 68 We’re going to start building our sample web site by first creating a page template. In the .NET world, such a template is often called a Master Page. We’ve also seen it called a Master Layout. Whatever it’s called, the page template is the framework in which we’ll build our web site. For our sample site, we’re going to read more..

  • Page - 68

    69 CHAPTER 6 ■ PAGE TEMPLATE Create your own custom Modernizr build: www.modernizr.com/download/ --> <script src="js/libs/modernizr-2.5.3.min.js"></script> </head> <body> <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href=”http:// browsehappy.com/”>Upgrade to a different browser</a> or <a read more..

  • Page - 69

    CHAPTER 6 ■ PAGE TEMPLATE 70 ■ Note Our apparent focus on Internet Explorer in this chapter is really just a side effect of the fact that Internet Explorer forces web developers to do extra work to get things to work on IE and the fact that IE is the only browser (at least currently) that supports conditional statements. Given that much of the world still read more..

  • Page - 70

    71 CHAPTER 6 ■ PAGE TEMPLATE Table 6-1. Conditional Operators for Internet Explorer Sample Operator Line Effect <!--[if IE 9]> If the visitor uses IE 9 and not some other version, they get the experience defined by the subsequent code. Notice that there’s no operator. The default operator is “equals.” As Listing 6-2 shows, we’re wrapping many versions of our read more..

  • Page - 71

    CHAPTER 6 ■ PAGE TEMPLATE 72 .ie7 .paddingDefinition { padding: 12px; /* Only IE7 */ } Instead of writing a bunch of CSS hacks or loading additional browser-specific style sheets (which would mean more HTTP requests and worse performance), we can simply define our browser-specific code next to the existing code, making it much easier to find and to understand. read more..

  • Page - 72

    73 CHAPTER 6 ■ PAGE TEMPLATE For more information about Compatibility Mode, visit http://msdn.microsoft.com/en-us/library/ dd567845(v=vs.85).aspx. As a rule, we prefer to turn off Compatibility Mode. To do so, we use the metaelement shown in the following line: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> ■ Caution The preceding metaelement can cause read more..

  • Page - 73

    CHAPTER 6 ■ PAGE TEMPLATE 74 Prompting for Installation of Google Chrome Frame As we noted in the previous section, you can’t guarantee that visitors using older versions of Internet Explorer have installed the Google Chrome Frame (GCF). However, you can prompt them to install it. If you enable this setting on the HTML5 Boilerplate site, you get a conditional element read more..

  • Page - 74

    75 CHAPTER 6 ■ PAGE TEMPLATE But what if Google goes down (unlikely, but you never know), or (more likely) what if I’m working without an Internet connection and I want to work on the code. The second script element says, “If I can’t get jQuery from the CDN, use the files located in my relative directory.” In this default case, it looks for jQuery in read more..

  • Page - 75

    CHAPTER 6 ■ PAGE TEMPLATE 76 This book doesn’t deal with JavaScript, so we’ll focus on the HTML and CSS parts of the 1140 CSS Grid. Also, the 1140 grid doesn’t need JavaScript when visitors use browsers that recognize media queries; however, it includes Google’s script for handling media queries on older browsers (called css3- mediaqueries.js). The file read more..

  • Page - 76

    77 CHAPTER 6 ■ PAGE TEMPLATE resize properly without any further work. For our sample e-commerce site, we’ve chosen the basic layout shown in Figure 6-4. Figure 6-4. The basic layout of our sample e-commerce site To achieve this layout intention, we have to wrap column elements in a couple of parent elements. Listing 6-8 shows this relationship. Listing 6-8. Relationship read more..

  • Page - 77

    CHAPTER 6 ■ PAGE TEMPLATE 78 Listing 6-9. Our Sample e-Commerce Site’s Base Structure <header class="container"> <section class="row"> <nav class="twelvecol"> This is the Main Header Section </nav> </section> </header> <nav class="container"> <section class="row"> <div read more..

  • Page - 78

    79 CHAPTER 6 ■ PAGE TEMPLATE Summary In this chapter, we introduced the idea of using a template page as the foundation of all (or at least most of ) the pages on a site. To make such a page, we introduced the excellent tool made available by the good people behind http://html5boilerplate.com. We also covered all the various settings created for us by the read more..

  • Page - 79

    81 ■ ■ ■ CHAPTER 7 Navigation Unless you’re making just a splash page, navigation is an essential aspect of your site. So you should really think about your strategy when it comes to this crucial element of your site’s success. Besides having a good taxonomy, you need to have a clear way for visitors to find and explore the different offerings available on read more..

  • Page - 80

    CHAPTER 7 ■ NAVIGATION 82 Menu Structure When creating a menu structure, you want the HTML that defines the menu’s content to • Be meaningful. Be readable. Be easy for screen readers to follow (or ignore). Be a good fit for progressive design goals. When we say that you want meaningful HTML for the menu, we mean that you want to be able to look at read more..

  • Page - 81

    83 CHAPTER 7 ■ NAVIGATION You can see that the menu structure is readable and expresses the correct nesting. In this case, the Level 2 Menu Items are children of a parent Level 1 Menu Item. We can now add styling and functionality to bring out your intent. Before getting to styling, though, let’s look at the HTML that provides the actual menu. As you read read more..

  • Page - 82

    CHAPTER 7 ■ NAVIGATION 84 instead get at that li element by declaring its parent and drilling in as follows: .nmUL li. That would indeed get the first-level li elements, the second-level li elements, and any li elements thereafter. While a selector such as .nmUL li li could be used to target those further nested li elements, doing so gets more convoluted read more..

  • Page - 83

    85 CHAPTER 7 ■ NAVIGATION </li> </ul> </div> </li> <li class="nmLI"> <a href="javascript:;" class="nmA">Electronics</a> <div class="nmSlideout zeroHeight"> <ul class="nmUL-L2 "> <li class="nmLI-L2"> read more..

  • Page - 84

    CHAPTER 7 ■ NAVIGATION 86 <ul class="nmUL-L2 "> <li class="nmLI-L2"> <a href="" class="nmA-L2">Cables</a> </li> <li class="nmLI-L2"> <a href="" class="nmA-L2">Desktop Computer Accessories</a> read more..

  • Page - 85

    87 CHAPTER 7 ■ NAVIGATION We’re not using images for this treatment; in other words, the menu is defined entirely through code. We’re heavily leveraging CSS3 to get a lot of extra visual impact, so you might reasonably wonder, “What about IE8?” Well, that brings up another point, and it’s a big one. Not all browsers need to show the exact same presentation. read more..

  • Page - 86

    CHAPTER 7 ■ NAVIGATION 88 Let’s get back to styling this menu. Listing 7-3 shows the CSS for the parent ul element: Listing 7-3. CSS for the Parent UL .navMainUL { display: block; min-height: 31px; padding: 0 5px 0 8px; border: 1px solid #cdbec4; width: 100%; margin-right: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; read more..

  • Page - 87

    89 CHAPTER 7 ■ NAVIGATION bD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #fefefe 0%, #fbf9fa 13%, #ece5e8 48%, #dad3d6 52%, #dad3d7 58%, #e8e8e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(13%, #fbf9fa), color-stop(48%, #ece5e8), color-stop(52%, #dad3d6), color-stop(58%, #dad3d7), color-stop(100%, read more..

  • Page - 88

    CHAPTER 7 ■ NAVIGATION 90 not in its quirks mode. Since Internet Explorer goes into standards-compliant mode when a valid document type is present, specifying a valid document type turns out to be the way to control this behavior. For an added wrinkle, Internet Explorer for the Mac never reduced the content area. ■ Author’s Note Michael says, “Personally, and as read more..

  • Page - 89

    91 CHAPTER 7 ■ NAVIGATION Notice in the Presets pane that you can choose from a lot of different starting points. You can also just dive in, ignore the presets, and brew up your own gradient from scratch. Below the Presets pane is where the magic happens. You can save your gradient by entering a name and hitting Save. This comes in handy if you need to tweak read more..

  • Page - 90

    CHAPTER 7 ■ NAVIGATION 92 to have to alternative ways to choose colors because it’s easy to accidentally move the color boxes when you double-click. Figure 7-9 shows the colors we selected. Figure 7-9. Gradient colors In the Adjustments pane below the Stops pane you’ll have some additional options to make sweeping hue/saturation changes and also reverse your color read more..

  • Page - 91

    93 CHAPTER 7 ■ NAVIGATION Listing 7-6 shows an li element that defines a menu item Listing 7-6. An li Element to Define a Menu Item <li class="nmLI"> <a href="javascript:;" class="nmA">Computer Hardware </a> <div class="nmSlideout zeroHeight"></div> </li> Listing 7-7 shows the CSS that styles a menu item. Listing 7-7. The read more..

  • Page - 92

    CHAPTER 7 ■ NAVIGATION 94 bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+tVKbSQAAABhQTFRFmJSXb2ttgX1/j4uNk4+ShYGDcm5wnpmckwoARwAAABdJ REFUeNpiYGRiZmBgY2VhHxIEQIABAPz1AvMeVbYrAAAAAElFTkSuQmCC); display: block; position: absolute; width: 4px; height: 33px; left: 0; top: 0; } The only tricky item here is the last ruleset, .nmLI:hover:before, which we’ll get to next. Before we proceed, we thought read more..

  • Page - 93

    95 CHAPTER 7 ■ NAVIGATION MTItMDUtMDFUMDA6NDk6MTgtMDU6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDEyLTA1LTAxVDA2OjI2OjA3LTA1OjAwIiB4bXA6 TWV0YWRhdGFEYXRlPSIyMDEyLTA1LTAxVDA2OjI2OjA3LTA1OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgeG1wTU06SW5z dGFuY2VJRD0ieG1wLmlpZDpGODBFRTI0RDhCNzcxMUUxQjc2RUI3REExQzg1RUEyMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1w LmRpZDpGODBFRTI0RThCNzcxMUUxQjc2RUI3REExQzg1RUEyMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5j read more..

  • Page - 94

    CHAPTER 7 ■ NAVIGATION 96 Using base64 encoding can be tricky, because you have to be cognizant of caching. If you add a base64-encoded image to your HTML, that image won’t be cached. As a result, if that image is needed again, it has to be added to the next page where it needs to appear. That’s a pain. Instead, put base64- encoded images in your CSS, read more..

  • Page - 95

    97 CHAPTER 7 ■ NAVIGATION -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; position: absolute; z-index: 11; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; read more..

  • Page - 96

    CHAPTER 7 ■ NAVIGATION 98 change, but if you use ease-in-out, it will accelerate more sharply at the beginning and end, while the middle slows a bit. The ease-in-out setting tends to make the animation seem more realistic; when things move in real life, they don’t usually move at the same exact rate. You might be thinking, “How do I tell it to change.” read more..

  • Page - 97

    99 CHAPTER 7 ■ NAVIGATION Property Name Type min-height length, percentage min-width length, percentage Opacity Number outline-color Color outline-offset Integer outline-width Length padding-bottom Length padding-left Length padding-right Length padding-top Length Right length, percentage text-indent length, percentage text-shadow Shadow Top length, percentage vertical-align keywords, length, percentage Visibility Visibility Width read more..

  • Page - 98

    CHAPTER 7 ■ NAVIGATION 100 That bit of styling contains no surprises. However, we’re about to bump into some more transition fun in the anchor tags and with the :before pseudo-class. We’re going to use those techniques to highlight a menu item, as shown in Figure 7-12. Figure 7-12. The Gaming menu with an item highlighted Listing 7-13 shows the code we used to read more..

  • Page - 99

    101 CHAPTER 7 ■ NAVIGATION color: #828282; font-weight: 700; position: absolute; text-shadow: -1px 0 #f3f3f3, 0 1px #f3f3f3, 1px 0 #f3f3f3, 0 -1px #f3f3f3; top: 6px; left: 5px; } You probably noticed the transition in the .nmA-L2 ruleset. That ruleset handles the slight transition when we hover over the tier 2 links so that we see a box fade read more..

  • Page - 100

    CHAPTER 7 ■ NAVIGATION 102 Then all that’s left is to position it absolutely, get it over to the left, and use a left padding to make sure the button text doesn’t intersect with it. That’s our kind of technique: easy and effective. The Drop-Down Effect Now that the styling’s in place, that leaves animating the drop-down in a fashion that embraces the read more..

  • Page - 101

    103 CHAPTER 7 ■ NAVIGATION } The most important thing in this class is that it sets the .nmSlideout element to a height of 0 (zero) with an !important declaration added so that it trumps any rule without an !important declaration. So it’s back to a height of zero. To animate it, use jQuery to remove the zeroHeight class on the mouseenter event and read more..

  • Page - 102

    CHAPTER 7 ■ NAVIGATION 104 }, 400); } }, function() { var slideout = t.find(".nmSlideout"); if(!Modernizr.cssanimations) { slideout.stop().animate({ "height" : 0 }, 400, function() { slideout.addClass("zeroHeight"); }); } else { read more..

  • Page - 103

    105 CHAPTER 7 ■ NAVIGATION Search Box Last but not least, there’s the search box. Given that a significant number of web users rely on Search to find things, you need to provide the capability and make it easy to find. For this site, let’s style the site search box such that it ends up to the right of the navigation. Listing 7-22 shows how to do it. read more..

  • Page - 104

    CHAPTER 7 ■ NAVIGATION 106 -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 0; border-top-left-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; read more..

  • Page - 105

    107 ■ ■ ■ CHAPTER 8 Masthead After the marathon of the last chapter, we thought you might like a break. Because we don’t have a lot to say about mastheads, we decided to balance that long chapter by following it with this short chapter. Our fundamental advice about mastheads is to keep them simple. Don’t try to stuff everything (or anything beyond the read more..

  • Page - 106

    CHAPTER 8 ■ MASTHEAD 108 This design element can become quite complex, sometimes offering 50 or more combinations. And while it’s possible to abstract that select box to a dynamically referenced piece of code, the HTML to generate the select list has to be downloaded every time. In the case of the country selector shown in Figures 8-1 and 8-2, more than 200 lines read more..

  • Page - 107

    109 CHAPTER 8 ■ MASTHEAD Listing 8-1. Masthead HTML <header class="headNav twelvecol"> <img class="logo_166" src="images/sprites/clikz-sprite.png" href="/" /> <nav> <ul class="acctNav"> <li class="acctNavLI"> <a href="" class="acctNavA">Account</a> </li> read more..

  • Page - 108

    CHAPTER 8 ■ MASTHEAD 110 } .acctNavA:hover { text-decoration: underline; } .mhCart { padding-right: 23px; } .mhCart:hover { text-decoration: none; } .mhCart:hover .cartText { text-decoration: underline; } .icon_cart { background: url(../images/sprites/clikz-sprite.png) no-repeat -22px -54px; width: 19px; height: 16px; position: absolute; z-index: 1; right: 0; read more..

  • Page - 109

    111 CHAPTER 8 ■ MASTHEAD In this case, we want just the logo portion, which is in the upper left. Figure 8-5 shows a more detailed view of the sprite with various characteristics called out. the top left corner of the image. The idea can be a little tricky to follow, so let’s look at a diagram. Figure 8-4 shows our sprite. Figure 8-4. Our sprite Figure read more..

  • Page - 110

    CHAPTER 8 ■ MASTHEAD 112 Listing 8-6. CSS to Style the Masthead Links .mhCart { padding-right: 23px; } .mhCart:hover { text-decoration: none; } .mhCart:hover .cartText { text-decoration: underline; } .icon_cart { background: url(../images/sprites/clikz-sprite.png) no-repeat -22px -54px; width: 19px; height: 16px; position: absolute; z-index: 1; right: 0; top: read more..

  • Page - 111

    113 CHAPTER 8 ■ MASTHEAD This way, when visitors hover over elements with .mhCart identifiers, the span.cartText element gets an underline but the image doesn’t. We think the extra markup is worthwhile, because it lets us make both the text and the icon selectable. Besides, it embraces the “think inside the box” paradigm that lets us keep our concerns contained read more..

  • Page - 112

    115 ■ ■ ■ CHAPTER 9 Footer Many sites have a footer. Usually, it’s a place to put legal information (such as copyright and trademark notices) and some content that applies to every page. Everyone who has surfed the web for more than ten minutes knows that, if you don’t find the Contact and About links in the header, look in the footer. Another use for a read more..

  • Page - 113

    CHAPTER 9 ■ FOOTER 116 Making the Footer There are a bunch of ways to make a footer: coding each link by hand, generating the links through a number of different server-side mechanisms, and even using a JavaScript template. (We recommend against using a JavaScript template, though; it doesn’t yield the best performance and isn’t friendly to search bots). In this read more..

  • Page - 114

    117 CHAPTER 9 ■ FOOTER <li class="nmLI-L2 nmLast"> <a href="" class="nmA-L2">Printers &amp; Scanners</a> </li> </ul> </div> </li> <li class="nmLI"> <a href="javascript:;" class="nmA">Electronics</a> <div read more..

  • Page - 115

    CHAPTER 9 ■ FOOTER 118 <a href="javascript:;" class="nmA">Accessories</a> <div class="nmSlideout zeroHeight"> <ul class="nmUL-L2 "> <li class="nmLI-L2"> <a href="" class="nmA-L2">Cables</a> </li> <li read more..

  • Page - 116

    119 CHAPTER 9 ■ FOOTER Those two variables are all we need The $navContext variable identifies which set of styles to use (either menu or site map). The $navContext variable can have a value of either nmDropDown or footerNav. Given those values, we can create two very different layouts of the same information. We also set the value of the $assistiveNav read more..

  • Page - 117

    CHAPTER 9 ■ FOOTER 120 In addition to the performance benefits mentioned earlier in this chapter, making the site map prominent offers another substantial benefit to both the visitors to the site and the business that runs the site. Users can see the site’s taxonomy at a glance. But what if someone says, “Well, isn’t that what a site map does?” The answer read more..

  • Page - 118

    121 CHAPTER 9 ■ FOOTER background: linear-gradient(top, #e6272b 0%, #f1282d 15%, #f2292e 27%, #e3262b 50%, #ca2226 77 %, #c62125 85%, #c62125 100%);/* W3C */ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e6272b', endColorstr='#c6212 5', GradientType=0);/* IE6-8 */ } .mainFooter { clear: both; padding: 18px 0; text-align: center; } .mainFooter .row { read more..

  • Page - 119

    CHAPTER 9 ■ FOOTER 122 9', GradientType=0);/* IE6-8 */ } .footerNav { display: inline-block; padding-top: 20px; } .footerNav .nmLI { float: left; margin-right: 30px; } .footerNav .nmA { color: #777; box-shadow: 0 0 3px #999; font-size: 14px; display: block; padding: 2px 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: read more..

  • Page - 120

    123 CHAPTER 9 ■ FOOTER filter: progid :dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f8f8f8', GradientType=1);/* IE6-8 fallback on horizontal gradient */ } .footerNav .ie9 .nmA { filter: none; } .footerNav .nmSlideout { height: auto; padding: 10px; } .footerNav .nmUL-L2 { padding-bottom: 20px; } .footerNav .nmA-L2 { color: #888; font-size: 12px; read more..

  • Page - 121

    CHAPTER 9 ■ FOOTER 124 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.5); } .legalText { margin: 0; font-size: 12px; color: #777; } .legalText a { color: #555; text-decoration: read more..

  • Page - 122

    125 CHAPTER 9 ■ FOOTER crazy it can get, visit another Paul Irish site to see how he uses shadows on text: http:// mothereffingtextshadow.com/ We recommend caution with shadows, no matter where you apply them, unless you’re making a site to demonstrate shadows. Wild shadows can make reading and navigation harder for the visitor. Still, when used well, they can draw read more..

  • Page - 123

    CHAPTER 9 ■ FOOTER 126 Listing 9-6 shows the code that generates the SVG image and the div element that contains it. Listing 9-6. The footerTopHolder div Element <div class="footerTopHolder"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" height="19px" viewBox="0 0 1133 19" read more..

  • Page - 124

    127 CHAPTER 9 ■ FOOTER M moveto, relative: Move the cursor to the relative coordinates following the character L lineto, absolute: Draw a line from the current cursor position to the new cursor position, given in absolute coordinates L lineto, relative: Draw a line from the current cursor position to the new cursor position, given in relative coordinates H horizontal lineto, read more..

  • Page - 125

    CHAPTER 9 ■ FOOTER 128 By calculating the absolute cursor positions, as we did in Table 9-2, you can figure out how big the viewBox attribute of the svg element has to be. Of course, we actually worked backwards from a desired width of 1133, which is the width of the 1140 grid with a small margin. To make sure the containing div.footerTopHolder appears read more..

  • Page - 126

    129 CHAPTER 9 ■ FOOTER Focus your attention on the ends of the lines. See how the angle is no longer 45 degrees? That’s because we changed the width attribute of the svg element but didn’t change the values of the d attribute within the path element. The effect is that of a vanishing point somewhere near the top of the monitor, which is the effect read more..

  • Page - 127

    CHAPTER 9 ■ FOOTER 130 Summary In this chapter, we described the footer that we use on our sample site: http://clikz.us. In the course of doing so, we demonstrated the following:how to reuse content to make both a menu and a site map.how to highlight important parts of the footer with shadows.how to use SVG on a web site. In the course of describing how to read more..

  • Page - 128

    131 ■ ■ ■ Figure 10-1. A fractal tree, to symbolize the recursive container design pattern CHAPTER 10 Fractal Design Patterns “Fractal” may seem a bit odd (especially since Jay has written about fractals in the strict mathematical sense in another book). In this case, though, we’re using the term somewhat metaphorically. By strict mathematical definition, a fractal is read more..

  • Page - 129

    CHAPTER 10 ■ FRACTAL DESIGN PATTERNS 132 While we’re not presenting mathematically derived fractals, we are going to describe a design pattern that includes repeating the same pattern to whatever depth we need (sometimes four or more levels deep). In other words, we’re going to describe a recursive container pattern. We mentioned the basic idea in Chapter 5 in the read more..

  • Page - 130

    133 CHAPTER 10 ■ FRACTAL DESIGN PATTERNS $payload .= $innerText . '</span>'; echo $payload;} ?> ■ Note In PHP, the ‘.’ character is the string concatenation character, serving the same function as the ‘+’ character in many other languages. Similarly, the ‘.=’ operator concatenates the string after the operator with the string value of the variable read more..

  • Page - 131

    CHAPTER 10 ■ FRACTAL DESIGN PATTERNS 134 Figure 10-2. A faceted navigation control Clear Intentions Provided you use descriptive names for your controls, your intent is clear to other developers—and to yourself when you revisit this code at a later date. ■ Tip Since these names won’t be inserted into the HTML, you can use even long descriptive names without worrying read more..

  • Page - 132

    135 CHAPTER 10 ■ FRACTAL DESIGN PATTERNS Figure 10-3. Controls within the faceted navigation control What’s important to us is that this control is made up of smaller reusable controls: link controls, label controls, checkbox controls, accordion controls, and so on. Consequently, faceted navigation becomes one of those just-mentioned mini-apps. Also, the faceted navigation pane is read more..

  • Page - 133

    CHAPTER 10 ■ FRACTAL DESIGN PATTERNS 136 Faster Page Development Time We saw increased speed (from months to days, in one case) for making pages. Consequently, our client teams were getting new products onto the web site much more quickly, which made the businesspeople (and everyone else, too) happy. Faster Bug Fixing We could easily point out where a team that used read more..

  • Page - 134

    137 CHAPTER 10 ■ FRACTAL DESIGN PATTERNS basically sales. One of our best sales tools was getting the client teams to realize that it was in their interest to have their requirements instituted quickly, and the framework offered the fastest way to make new pages that would meet the requirements of the various business units (we’re talking about a company with over read more..

  • Page - 135

    CHAPTER 10 ■ FRACTAL DESIGN PATTERNS 138 The big gain from this approach came in the form of defect resolution and maintenance. By being able to affect many patterns in a single code base, we made fixing defects and making change requests to our files a relative snap. And by having segregated CSS and JavaScript files, we didn’t have to pour through a read more..

  • Page - 136

    139 CHAPTER 10 ■ FRACTAL DESIGN PATTERNS Combining CSS and JavaScript It’s great to make lots of little files at development time, but it’s a disaster at runtime. So what do you do? You combine all the little files into one big file that you send with every page. There are lots of solutions for minimizing and combining files. For our e-commerce example we read more..

  • Page - 137

    CHAPTER 10 ■ FRACTAL DESIGN PATTERNS 140 because of all the files being combined, reading the code can be a real pain. To avoid that problem during development, we use separate references to the CSS and JavaScript files. Listing 10-4 shows an example. Listing 10-4. Separate Links to CSS Files <!-- <link rel="stylesheet" href="css/reset.css"> <link read more..

  • Page - 138

    141 ■ ■ ■ CHAPTER 11 Link Control You might be thinking, do we really need a control for a link? Isn’t it just easier to write a single line of HTML to take care of this task? While we’re fans of not using something complex when something simple will work, we also know we can gain significant benefits by making a link control. For one thing, we read more..

  • Page - 139

    CHAPTER 11 ■ LINK CONTROL 142 Add CSS classes. Add an ID. Add a type of link: internal, external, e-mail, or help. Set a tooltip message. Control whether the link is output to the page or returned as a value to another function. Gain progressive enhancement when we detect more capable browsers. That’s more like it. Now we’ve got requirements for a flexible control read more..

  • Page - 140

    143 CHAPTER 11 ■ LINK CONTROL // A link with an href attribute and a way to describe what is about to // happen seems pretty important, so we'll make it mandatory. While // there's cases for omitting these, we'll keep this code clean and // handle those other cases in a different manner. // We'll use a try-catch block read more..

  • Page - 141

    CHAPTER 11 ■ LINK CONTROL 144 // We include the other way for greater readability ( if ($type != NULL && $type != "") $output .= <span class='linkIcon'" if (type == "help") $output .= " data-tooltip-message='" . $tooltipMessage . "'"; $output .= "></span>" $output .= "</a>"; read more..

  • Page - 142

    145 CHAPTER 11 ■ LINK CONTROL <a href='http://somesite.com' data-link-type='external' class='link'>External Link<span class='linkIcon'></span></a><br/><br/> <a href='mailto:me123@thefakeemail.com' data-link-type='email' class='link'>Email Link<span class='linkIcon'></span></a><br/><br/> <a href='javascript:;' data-link-type='help' class='link'>Help Link<span class='linkIcon' data- read more..

  • Page - 143

    CHAPTER 11 ■ LINK CONTROL 146 We also built our controls to be able to ignore unnecessary arguments (except for href and descriptive text, which we think are necessary). For performance reasons, we don’t want to generate any HTML that isn’t expressly needed. Rather than a single huge listing, we’ve broken it up into a number of smaller listings, each with read more..

  • Page - 144

    147 CHAPTER 11 ■ LINK CONTROL animation-name: throb; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: forwards; } /* * Our keyframe "throb" makes the link above start with its original * blue color and transition to green with a smooth animation. Then * back to blue. It repeats read more..

  • Page - 145

    CHAPTER 11 ■ LINK CONTROL 148 A reminder of the visual effect and functionality that we're trying to achieve might help at this point. Figure 11-3 shows a table full of nonsense content that contains various kinds of links. The header row has help links, the second column has external links, and the last column has e-mail links. Figure 11-3. A table showing different read more..

  • Page - 146

    149 CHAPTER 11 ■ LINK CONTROL */ a[data-link-type].link .linkIcon { background-image: url(/images/sprites/clikz-sprite.png); background-repeat: no-repeat; width: 16px; height: 16px; position: absolute; right: 3px; top: 0; } Listing 11-9 shows a neat trick (well, we think it’s neat). The idea is to insert an element when the visitor’s mouse hovers over read more..

  • Page - 147

    CHAPTER 11 ■ LINK CONTROL 150 a[data-link-type].link .linkIcon:hover:after, .tooltipMessage { content: ''; background: #14699F; width: 200px; position: absolute; z-index: 99; right: -206px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; read more..

  • Page - 148

    151 CHAPTER 11 ■ LINK CONTROL } a[data-link-type="external"].link .linkIcon:hover:after { content: "This link will take you to another site."; } Listing 11-13 defines the position and tooltip content of an e-mail link. Listing 11-13. Defining the Position and Tooltip Content of an e-mail Link /* * EMAIL LINK */ a[data-link-type="email"].link .linkIcon { read more..

  • Page - 149

    CHAPTER 11 ■ LINK CONTROL 152 Using JavaScript When CSS Fails Us With CSS, it’s amazing how much we can do to make our code very efficient. The CSS used here also performs very well, because the browser handles it natively rather than as extra functionality defined by scripting. However, if this more modern CSS is not supported, we still want to retain read more..

  • Page - 150

    153 CHAPTER 11 ■ LINK CONTROL } </script> We’ve written a jQuery plug-in to handle help tooltip functionality when generatedcontent functionality is not available (that is, when the pseudo :after and :before classes are not available). We use the plug-in to approximate the :after functionality by inserting a div element and assigning it the class of read more..

  • Page - 151

    155 ■ ■ ■ The Content Although it has many uses, the sidebox control always has certain features—in particular, a header and a bounding box—regardless of its content. Let’s start developing our control by specifying those two features (see Figure 12-2). CHAPTER 12 Sidebox Control Now that you’ve seen the relatively simple link control, let’s look at controls read more..

  • Page - 152

    CHAPTER 12 ■ SIDEBOX CONTROL 156 The structure of the sidebox is pretty basic, as may be seen in Listing 12-1. Listing 12-1. The HTML of a Sidebox <nav class="sideBox"> <h1 class="sbH1 accentGradient gradient siteGrad">Sidebox Head</h1> <div class="sbBody"> <!--Our sidebox contents go here --> </div> </nav> As you can see, read more..

  • Page - 153

    157 CHAPTER 12 ■ SIDEBOX CONTROL Listing 12-3 shows the .sbH1 (short for sidebox H1) style, which specifies the many properties of the H1 element. In addition to ho-hum properties such as font size and color, we also specify rounded corners for the sidebox control. Specifying the rounded corners takes up most of the listing, because we have to get it to work read more..

  • Page - 154

    CHAPTER 12 ■ SIDEBOX CONTROL 158 LmRpZDoyMjQyNzc2NkIxQUYxMUUxOEJFODlBMDkxM0UyQ0FDNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5j ZUlEPSJ4bXAuaWlkOjIyNDI3NzYzQjFBRjExRTE4QkU4OUEwOTEzRTJDQUM0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlk OjIyNDI3NzY0QjFBRjExRTE4QkU4OUEwOTEzRTJDQUM0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4 bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ADj9TgAAADBQTFRF/v7+7e3t/Pz83d3dzMzM9/f3u7u79fX1+vr61NTUrKys read more..

  • Page - 155

    159 CHAPTER 12 ■ SIDEBOX CONTROL } .sbBody { -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-topleft: 0; border-top-right-radius: 0; border-bottom-right-radius: read more..

  • Page - 156

    CHAPTER 12 ■ SIDEBOX CONTROL 160 reverse alphabetical, original order (most common), and so on. The model used an enumeration that told the rendering class how to order the tabs. Moving that logic into the models let the rendering class (and so the whole control, really) be as dumb as the proverbial box of rocks. And really dumb controls let us stay away read more..

  • Page - 157

    161 CHAPTER 12 ■ SIDEBOX CONTROL $class Contains any additional classes to apply to the control. Can be empty. In our example, we’ll render the partial view through another function. Various platforms handle partials in different ways. PHP and other scripting languages tend to use another function (although PHP includes can consist of just plain HTML). Object-oriented platforms read more..

  • Page - 158

    CHAPTER 12 ■ SIDEBOX CONTROL 162 Listing 12-8. new_to_store.php, Which Contains the Content for the Sample Sidebox Control <?php $newToStoreArray = array( array("Bob's Back Cream", "javascript:fakelink(this);", NULL, "sbA-L2"), array("Giant Tentacle Hands","javascript:fakelink(this);", NULL, "sbA-L2"), array("Cricket read more..

  • Page - 159

    163 CHAPTER 12 ■ SIDEBOX CONTROL far. (Jay first learned this truism when he was a contributor to the Apache FOP project and has validated it repeatedly over the years.) The first line creates the opening tag of an unordered list (UL) element. Then the for loop traverses the outer loop. For each inner array within the outer array, the for loop creates an li read more..

  • Page - 160

    165 ■ ■ ■ CHAPTER 13 Button Control Here’s another seemingly simple piece of HTML to make into a control. However, while it may seem like an odd place to invest effort, doing so pays off in consistency, flexibility, and developer velocity. We’ll stick with the fractal design pattern. That is, we’ll use (reuse, really) the same HTML for each kind of button, use read more..

  • Page - 161

    CHAPTER 13 ■ BUTTON CONTROL 166 You can view and interact with these buttons (in full color, too) at http://clikz.us/BookExamples/ buttonControl.php. In the online example, you can see that we’ve included some fancy interactions for our buttons. Namely, the button appears to depress on hover or throb with an inner glow, depending on which treatment we use. Those read more..

  • Page - 162

    167 CHAPTER 13 ■ BUTTON CONTROL http://clikz.us/BookExamples/buttonControl.php Figure 13-4. The Primary Glass button treatment Primary Shadow The Primary Shadow button treatment looks very similar to the Primary Glass button treatment, but we create the effect by using a different technique: a white inset shadow. This requires far less code than the gradient and allows some CSS read more..

  • Page - 163

    CHAPTER 13 ■ BUTTON CONTROL 168 Coding the Button Control Let’s examine the code behind the button control. It’s probably familiar by now, since it uses the same techniques used in previous controls. We use the fractal design pattern here, so we make a string with some conditionals. Table 13-1 describes the parameters of the price function. Table 13-1. read more..

  • Page - 164

    169 CHAPTER 13 ■ BUTTON CONTROL // Start string that contains the HTML output with // the option to use an anchor tag or a button tag. $output = "<" . $htmlEl; // Put in our href attribute. $output .= " href='" . $href . "'"; // Get a base class of button. $output .= " class='button"; // If there's a read more..

  • Page - 165

    CHAPTER 13 ■ BUTTON CONTROL 170 return "primary go outset"; break; default: return ""; } } ?> As we’ve mentioned before, the same purpose can be achieved in many different languages. We just happen to be using PHP (we had to use something, and we find PHP to be easy to read). We’re not up to anything fancy read more..

  • Page - 166

    171 CHAPTER 13 ■ BUTTON CONTROL generate an element by using the :before pseudo selector and make that element match the containing button in width, height, and border radius. We then added a 5-pixel padding all the way around, which made the whole treatment 10 pixels bigger than the button itself. To center the button within its wrapper, we added top and left read more..

  • Page - 167

    CHAPTER 13 ■ BUTTON CONTROL 172 background-color: #24c61c; text-decoration: none; text-shadow: 0 0 4px rgba(255, 255, 255, 0.2); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6), 1px 1px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6), 1px 1px 1px rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6), 1px read more..

  • Page - 168

    173 CHAPTER 13 ■ BUTTON CONTROL Listing 13-8 shows the CSS rule for the Primary button in the active state. Listing 13-8. CSS Rule for the Primary Button in the Active State .button.primary:active { background: green; } Listing 13-9 shows the rule that defines the Primary button with a glass effect. Compare Listing 13-9 with Listing 13-10, which generates a very read more..

  • Page - 169

    CHAPTER 13 ■ BUTTON CONTROL 174 -moz-box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.4), inset 0 12px 2px rgba(255, 255, 255, 0.4); box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.4), inset 0 12px 2px rgba(255, 255, 255, 0.4); } Listing 13-11 shows the first of the rules that create the Outset button treatment for the two buttons that have outset treatments. As read more..

  • Page - 170

    175 CHAPTER 13 ■ BUTTON CONTROL position: absolute; padding: 5px; background: #CCC; left: -5px; top: -5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.4), inset 0 10px 2px read more..

  • Page - 171

    CHAPTER 13 ■ BUTTON CONTROL 176 display: block; z-index: -1; position: absolute; padding: 3px; background: #CCC; left: -3px; top: -3px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-box-shadow: inset 0px 0px 4px read more..

  • Page - 172

    177 CHAPTER 13 ■ BUTTON CONTROL } @-moz-keyframes shadowThrob { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @-o-keyframes shadowThrob { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @keyframes shadowThrob { 0% { read more..

  • Page - 173

    CHAPTER 13 ■ BUTTON CONTROL 178 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAAAZCAYAAAAG2cHnAAAAGX RFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+dpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldC BiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bn M6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMC read more..

  • Page - 174

    179 CHAPTER 13 ■ BUTTON CONTROL This CSS seems like a lot when you read through it in a book, but it’s not really all that much in the big scheme of things. We’ve mentioned the sad fact that we’ve seen CSS files larger than a megabyte. Imagine trying to understand those monsters! Still, we hope our CSS makes sense to you. Also, we encourage you to read more..

  • Page - 175

    181 ■ ■ ■ CHAPTER 14 Price Control The price control is really two controls, but we’re putting them in the same chapter because they often go together. In addition to the actual price control, we have a shipping control. The price control contains price information—not just the final price but also base price, discounts, taxes, and so on. The shipping control read more..

  • Page - 176

    CHAPTER 14 ■ PRICE CONTROL 182 ■ Note The HTML that holds the price information includes a placeholder for shipping information. Listing 14-1 shows the portion of the HTML that holds the price information for the price listing shown in Figure 14-1. Listing 14-1. The Price Portion of the HTML Inserted by the Price Control <div class="dottedPriceWrap"> read more..

  • Page - 177

    183 CHAPTER 14 ■ PRICE CONTROL The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself. Cascading Style Sheets Level 2 Revision 1 read more..

  • Page - 178

    CHAPTER 14 ■ PRICE CONTROL 184 show our delimiter, but we don’t want that text to appear. As we discussed earlier in the chapter, the base64-encoded data contains the image that constitutes the dots for our dotted delimiter. ■ Tip This technique provides a dot leader that works against various backgrounds, including gradients. Listing 14-4. Specifying the Delimiter read more..

  • Page - 179

    185 CHAPTER 14 ■ PRICE CONTROL } Listing 14-5 shows the rule that specifies where to find the image for the dots for visitors who use IE6 or 7. It also specifies that the image should repeat horizontally across the entire line. Listing 14-5. Specifying Dots for IE6 and IE7 .ie6 .dottedSpanner, .ie7 .dottedSpanner { background: url(/images/period.gif) repeat-x bottom read more..

  • Page - 180

    CHAPTER 14 ■ PRICE CONTROL 186 ■ Note Usually, the values that go into these controls (and most others) would come from a database. For the sake of simplicity, we’re not using a database on our sample site. Instead, we’re just inserting values by hand, since our focus is HTML and CSS, not back-end work. Table 14-1 describes the parameters of the read more..

  • Page - 181

    187 CHAPTER 14 ■ PRICE CONTROL } ?> The Shipping Control As we mentioned at the start of the chapter, the shipping control is a separate control. however, because a shipping control often follows a price control, we’re explaining the shipping control here. Starting with the HTML produced by the shipping control function will provide context that should help you read more..

  • Page - 182

    CHAPTER 14 ■ PRICE CONTROL 188 icon and the shipping information. As with the dots in the delimiter, we use a block of base64-encoded data to specify the icon image. Listing 14-12. Inserting the Calendar Icon .iconShipping { width: 18px; height: 18px; position: absolute; left: 0; top: 1px; background-repeat: no-repeat; background-image: read more..

  • Page - 183

    189 CHAPTER 14 ■ PRICE CONTROL display: block; } Now let’s move on to the PHP portion of the control. The Control The .shipDate function does much the same thing as the price function. That is, it builds up a string containing HTML elements and, if the $echo parameter contains "echo", sends the content to the browser or, if the $echo parameter read more..

  • Page - 184

    CHAPTER 14 ■ PRICE CONTROL 190 $output .= '</div>'; if($echo == "return"){ return $output; }else { echo $output; } } ?> Using the Controls To use the controls, you must insert php tags into your web page. Each price and shipping control requires a separate php tag. Consider the example we’ve used throughout this chapter. Figure read more..

  • Page - 185

    191 CHAPTER 14 ■ PRICE CONTROL in to a closer view of a fractal image, you see a very similar image. Similarly, if you look inside one of our controls, you’re likely to find more controls. read more..

  • Page - 186

    193 ■ ■ ■ CHAPTER 15 Product Control In previous chapters, we have alluded to the product control, which uses other controls for much of its content. Because it is a stack of other controls and its usual layout is vertical, with one item of information stacked upon another, we normally call it the product stack. The control can also have a more horizontal read more..

  • Page - 187

    CHAPTER 15 ■ PRODUCT CONTROL 194 The horizontal layout of the product control takes the same amount of space but is a bit friendlier for a book layout. We find that the vertical layout works best on a web page, where we can put a number of product controls next to one another to help customers compare products. That said, the horizontal layout has its web read more..

  • Page - 188

    195 CHAPTER 15 ■ PRODUCT CONTROL Much of the content in the product control, whether vertical or horizontal, probably looks familiar. The help link (the question mark in a circle) is the same help link seen in Chapter 11. The shipping block (the calendar icon, the “Estimated Ship Date” text, and the actual date) is the same shipping block seen in Chapter 13. The read more..

  • Page - 189

    CHAPTER 15 ■ PRODUCT CONTROL 196 Now that you know what the input looks like, let’s consider the output. The HTML Produced by the Control The control creates HTML where it is used within a page. We provide that HTML so that you can see what the control produces at runtime. The HTML is embedded in the control, as we’ll show later, but it’s a lot read more..

  • Page - 190

    197 CHAPTER 15 ■ PRODUCT CONTROL </div> <div class="priceSubWrap"> <div class="priceAmt"> <sup class="currency">$</sup><span class="wholeNumber">100.</span><sup class="currency">00</sup> </div> <div read more..

  • Page - 191

    CHAPTER 15 ■ PRODUCT CONTROL 198 <li class="pcDescLI"> Carles, fingerstache forage scenester. </li> </ul> <!-- Here’s a button control, constituted as a link, since it’s not in a form --> </div><a href="/addToCart.php" class="button primary shadow">Buy Me</a> </article> The listing read more..

  • Page - 192

    199 CHAPTER 15 ■ PRODUCT CONTROL font-size: 18px; margin: 0; line-height: 110%; color: #1f81dd; } .priceLabel { color: #555; } .priceAmt { color: green; font-weight: bold; } .pcDescBullets { margin: 0; padding-left: 20px; } Listing 15-4 shows the CSS rules that apply only to the vertical treatment of the product control. The listing makes more read more..

  • Page - 193

    CHAPTER 15 ■ PRODUCT CONTROL 200 Listing 15-5. CSS rules for only the Horizontal Treatment of the Product Control /* * Styles to affect the pcTreatment2 look. * */ .pcTreatment2 { width: 300px; padding-left: 230px; color: #333333; } .pcTreatment2 .pcImage { width: 200px; height: 200px; position: absolute; left: 0; top: 0; -webkit-box-shadow: 0 read more..

  • Page - 194

    201 CHAPTER 15 ■ PRODUCT CONTROL } Because these rules aren’t complex, there’s no need to describe each one separately, as we’ve done in other chapters. This is in fact another benefit of building controls from other controls: The complexity can be hidden. We’re using the CSS rules for the link, price, and button controls, but we don’t have to concern read more..

  • Page - 195

    CHAPTER 15 ■ PRODUCT CONTROL 202 {"bulletText": "Pinterest carles, fingerstache forage scenester."}, {"bulletText": "Carles, fingerstache forage scenester."} ], "button" : {"text": "Buy Me", "href": "/addToCart.php", "type": "primaryShadow"} }'; ?> Now that you’ve seen the control’s read more..

  • Page - 196

    203 CHAPTER 15 ■ PRODUCT CONTROL // Start with our containing element and add a product control treatment if applicable $output = ' <article class="productControlWrap '.$treatment.'">'; // If there's an image defined output the image tag if($obj->img != NULL){ $output .= ' <img src="'.$obj->img.'" read more..

  • Page - 197

    CHAPTER 15 ■ PRODUCT CONTROL 204 $output .= ' </div>'; } // If there's a button defined output it //if($obj->button != NULL){ // We're using the button control here. See Chapter 13 for more about button controls. $output .= button( $obj->button->{'text'}, read more..

  • Page - 198

    205 ■ ■ ■ CHAPTER 16 Table Control As a front-end developer, Michael has a love-hate relationship with tables. On the one hand, tables offer a near-perfect way to display tabular data. On the other, some developers abuse tables as a layout mechanism for almost anything. Michael has frequently seen a developer (often a back-end or middleware developer pressed into doing read more..

  • Page - 199

    CHAPTER 16 ■ TABLE CONTROL 206 Figure 16-2 shows our hover functionality. When a visitor’s mouse hovers over a cell, the entire row highlights, and the cell over which the mouse is hovering gets further highlighting (it gets darker). In highlighting both the row and the cell, details related to the choice the visitor is considering are also highlighted. As we show read more..

  • Page - 200

    207 CHAPTER 16 ■ TABLE CONTROL treatment might be useful for visitors viewing the table on a phone or other device with a limited display. The narrow view could also be useful for situations where a page designer wants to put tabular information one side of a page and other information on the other side of the page. For example, a music site might have a list read more..

  • Page - 201

    CHAPTER 16 ■ TABLE CONTROL 208 The narrow treatment uses exactly the same HTML as the wide treatment, with the exception of changing a class name to reflect the intended treatement. We’ve just used CSS to pivot the table for devices with narrow displays. Speaking of HTML, let’s look at the HTML behind our example. The HTML The HTML for our sample table is read more..

  • Page - 202

    209 CHAPTER 16 ■ TABLE CONTROL </ul> <ul class="tr tableBody"> <li class="td first" data-colhead=""> Irony mumblecore </li> <li class="td " data-colhead="The Head"> Letterpress authentic </li> <li class="td " data-colhead="Top of the Stack"> read more..

  • Page - 203

    CHAPTER 16 ■ TABLE CONTROL 210 ["Austin blog bicycle","Letterpress authentic","Salvia hella raw","Cosby sweater cred","Irony mumblecore","Chambray 8-bit post-ironic"] ]'; ?> The Table Control As already mentioned, we’re using PHP for our sample site. However, any language that supports web development would work just as well. In our own read more..

  • Page - 204

    211 CHAPTER 16 ■ TABLE CONTROL } $output .= '</' . $trElement . '>'; } $output .= '</' . $tableElement . '>'; echo $output; } ?> The actual control is pretty simple. The real work gets done by the styles. Let’s look at them. The Styles We do all of the layout work in the CSS styles. As mentioned before, doing so provides a read more..

  • Page - 205

    CHAPTER 16 ■ TABLE CONTROL 212 Listing 16-5. Setting the Display Mode for the Classes That Define Our Tables /* * This is how we achieve our tablelike structure with these elements. * Basically we're just assigning the same attributes that the corresponding * table elements have in the 'display' property. */ .table { display: table; } .tr { display: table-row; read more..

  • Page - 206

    213 CHAPTER 16 ■ TABLE CONTROL font-weight: bold; } Listing 16-9 shows how we style the body cells. To do so, we use one of the more rarely used CSS selectors (the nth-child selector). Doing so lets us style every other row differently and thus make the table more attractive and easier to read. We’ve put additional explanation in the comments. Listing 16-9. read more..

  • Page - 207

    CHAPTER 16 ■ TABLE CONTROL 214 * In this case, we target the third column of each odd row. * This rule complements the next rule, which makes the * entire 3rd column a green color but makes the alternating * rows a slightly darker green color to maintain readability. */ background: #54d543; } Listing 16-13 shows how we make the read more..

  • Page - 208

    215 CHAPTER 16 ■ TABLE CONTROL * background color. Because the previous nth-child * selector has greater specificity, it will override this * rule in odd rows. */ background: #b2ebac; } Listing 16-17 shows how we set the appearance (not including the background color) of the cells, including both header cells and body cells. Listing 16-17. read more..

  • Page - 209

    CHAPTER 16 ■ TABLE CONTROL 216 Oi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJl c2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFk aWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Ag b2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FlYmNiZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUw read more..

  • Page - 210

    217 CHAPTER 16 ■ TABLE CONTROL Listing 16-24. Setting the Background for Header Cells in IE8 .ie8 .tableTreatment1 .tableHead .td { background: #aebcbf; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#aebcbf', endColorstr='#0a0809', GradientType=0); } Styles for the Narrow Treatment The narrow treatment gets styles that differ quite a bit from the styles that define read more..

  • Page - 211

    CHAPTER 16 ■ TABLE CONTROL 218 Listing 16-29 shows how we style the cells within the narrow treatment of the table control. Listing 16-29. Styling the Cells Within the Narrow Treatment .tableTreatment2 .td { display: block; float: none; padding: 5px; } Listing 16-30 shows how we style the first cell within each block of the narrow treatment of our table read more..

  • Page - 212

    219 CHAPTER 16 ■ TABLE CONTROL Listing 16-31. Inserting the Equivalent of a Header for Cells in the Narrow Treatment .tableTreatment2 .td:before { /* * We're able to leverage the content: attr() again as we did * in our link control. Since our control has stored the * value of the column in the 'td' we can just get it from there. */ read more..

  • Page - 213

    CHAPTER 16 ■ TABLE CONTROL 220 padding: 5px; } .tableTreatment1 .td:first-child { color: white; font-weight: bold; text-shadow: 0 0 3px #333; background: #aebcbf; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodH RwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcH read more..

  • Page - 214

    221 CHAPTER 16 ■ TABLE CONTROL For us, writing the CSS rules for the table control was fun. We don’t often get to use those more unusual selectors, so it’s nice to find a place to show how they work. Many tables probably don’t need this level of complexity; making a column in the middle a different color is unusual, in our experience. Figure 16-4. read more..

  • Page - 215

    CHAPTER 16 ■ TABLE CONTROL 222 However, when you need to do it, it’s handy to have selectors that let you specify a particular child and even a child within a child. As we said, it’s fun—but then we’re weird. ■ Caution: When Even Isn’t Really Even. We mentioned in passing that the even rows aren’t specified as being even. Rather, we set read more..

  • Page - 216

    223 ■ ■ ■ CHAPTER 17 Tab Control We’ve all seen lots of tabs on the web. Some of them are OK. Some stink. Naturally, we want to make a tab control that doesn’t stink (and that’s hopefully better than just OK), so that we can re-use it for all kinds of content while being sure it looks good and works well. One way in which tabs on web sites read more..

  • Page - 217

    CHAPTER 17 ■ TAB CONTROL 224 For variety, the horizontal treatment uses a white background, while the vertical treatment uses a black background. You could easily use other colors. Figure 17-2 shows the tab control’s vertical treatment. retrieve data from the database and pass it to a function (the control) than it is to make your own tabs every time you need them. read more..

  • Page - 218

    225 CHAPTER 17 ■ TAB CONTROL (JavaScript) and style (CSS) information. The HTML does not change between the horizontal and vertical treatments; we control the differences in appearance entirely through CSS. The HTML consists of a section element that has two ul children. The li children of the first list, whose class attribute includes tabTriggerLI, hold the tab labels. read more..

  • Page - 219

    CHAPTER 17 ■ TAB CONTROL 226 Scenester hoodie tattooed food truck tofu, selvage blog sriracha polaroid hella keytar before they sold out +1. </p> </li> <li class="tabContentLI" data-tabid="#tab3"> <p> Hella 8-bit viral master cleanse salvia shoreditch. Leggings banksy mustache, read more..

  • Page - 220

    227 CHAPTER 17 ■ TAB CONTROL Listing 17-2. The Data Object That Feeds Our Sample Tab Control <?php $tabObj = '[ { "triggertext" : "This is a Tab", "triggerid" : "#tab1", "tabcontent" : "<p>Skateboard banh mi direct trade fanny pack mixtape, pork belly art party. Dreamcatcher wes anderson raw denim kogi gastropub. read more..

  • Page - 221

    CHAPTER 17 ■ TAB CONTROL 228 Table 17-1. Arguments for the Tab Control Argument Description $model The data that goes into the tab control. We call it a model because we’re used to working with the MVC (Model-View-Controller) pattern. $id A unique identifier for this tab control. A page can have multiple tab controls. Having unique identifiers lets a script target an read more..

  • Page - 222

    229 CHAPTER 17 ■ TAB CONTROL $output .= ' </ul>'; $output .= '</section>'; echo $output; } ?> Creating a Tab Control To create a tab control, you must call the tabControl function. As we described earlier, the PHP function that makes the tab control takes three arguments: the data, a unique identifier for each tab control, and the treatment read more..

  • Page - 223

    CHAPTER 17 ■ TAB CONTROL 230 // Find the the .tabContentUL. We'll use this as a starting // selector to find our targeted tab content tabContentUL = tab.find(".tabContentUL"), // Grabs all the .tabContentLI's into a collection. tabContentLIs = tabContentUL.find(".tabContentLI"), read more..

  • Page - 224

    231 CHAPTER 17 ■ TAB CONTROL } // Add a click event to the tab targets. $(this).find(".tabTriggerA").click(function tabTrigger() { // Captures the element clicked and makes it a jQuery element. // The $(this) here is scoped to only the .tabTriggerA that read more..

  • Page - 225

    CHAPTER 17 ■ TAB CONTROL 232 }); // Because IE still has some trouble being in compliance, we'll // trigger a JS solution to allow for our tabs to be any height // and still retain the tab style metaphor by being the same // height. read more..

  • Page - 226

    233 CHAPTER 17 ■ TAB CONTROL selectedTabContent = tabContentUL.find(".tabContentLI[data-tabid='" + selector + "']"); return selectedTabContent; } // Shows the first tab in the series. function showFirstTab() { var currentTab = tabContentLIs.eq(0); read more..

  • Page - 227

    CHAPTER 17 ■ TAB CONTROL 234 Listing 17-6. Styling the Outside Wrapper of the Tab Control /* * These rules define the generic attributes that all instances of our tab controls have. */ .tabWrap { /* * In order to get the tabs to fit across the whole * control and have the text inside the tab triggers * be vertically centered, we use read more..

  • Page - 228

    235 CHAPTER 17 ■ TAB CONTROL } Listing 17-10 shows how we turn each of the tab labels into a table cell. We also set padding values and both horizontal and vertical centering. Listing 17-10. Turning a List Item into a Table Cell .tabWrap .tabTriggerLI { display: table-cell; padding: 5px 20px 2px 20px; text-align: center; vertical-align: middle; } Listing read more..

  • Page - 229

    CHAPTER 17 ■ TAB CONTROL 236 * default state, and when the tab content is triggered * by the tab trigger, it will animate into 100% opacity. * We're also setting the visibility to hidden and changing * that to a visibility of visible on trigger selection * to accommodate browsers that don't handle opacity. */ -webkit-opacity: read more..

  • Page - 230

    237 CHAPTER 17 ■ TAB CONTROL */ .tabTreatment1 { width: 625px; } Listing 17-16 shows how we style the actual tabs (the structure around each tab label) within the tab control for the horizontal treatment. In this rule, we dictate the look of the inactive tabs. We override some of these values when a tab becomes active. Here, we specify rounded corners read more..

  • Page - 231

    CHAPTER 17 ■ TAB CONTROL 238 stop(6%, #fff9f9), color-stop(25%, #ffebeb), color-stop(25%, #fee8e8), color-stop(32%, #fee4e4), color-stop(33%, #fee1e1), color-stop(50%, #fed5d5), color-stop(51%, #fdc6c7), color-stop(66%, #fcbebf), color-stop(92%, #fdaaab), color-stop(100%, #fda7a8)); background: -webkit-linear-gradient(top, #fffbfb 0%, #fff9f9 6%, #ffebeb 25%, #fee8e8 25%, #fee4e4 32%, #fee1e1 33%, #fed5d5 read more..

  • Page - 232

    239 CHAPTER 17 ■ TAB CONTROL e4e4 32%, #fee1e1 33%, #fed5d5 50%, #fcd4d4 51%, #fcfcfc 100%); background: -o-linear-gradient(top, #fffbfb 0%, #fff9f9 6%, #ffebeb 25%, #fee8e8 25%, #fee4e4 32%, #fee1e1 33%, #fed5d5 50%, #fcd4d4 51%, #fcfcfc 100%); background: -ms-linear-gradient(top, #fffbfb 0%, #fff9f9 6%, #ffebeb 25%, #fee8e8 25%, #fee4e4 32%, #fee1e1 33%, #fed5d5 50%, #fcd4d4 read more..

  • Page - 233

    CHAPTER 17 ■ TAB CONTROL 240 * we set the transition property below. This * tells it to transition on all available * transition properties when there's a change. */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; read more..

  • Page - 234

    241 CHAPTER 17 ■ TAB CONTROL to get the nicer gradient in IE9. We need two rules, so that we can override the filter property for all tabs and for the active tab. Listing 17-21. Setting Filters to None for IE9 for the Horizontal Treatment /* * We need to disable the filter property * for IE9 so we can use our SVG alternative. */ .ie9 .tabTreatment1 read more..

  • Page - 235

    CHAPTER 17 ■ TAB CONTROL 242 border: 1px solid; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } Listing 17-23 shows how we turn the list that holds the tab labels into a table for the vertical treatment. Because we set the width to 100 read more..

  • Page - 236

    243 CHAPTER 17 ■ TAB CONTROL stop(100%, #0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#7d7e7d', read more..

  • Page - 237

    CHAPTER 17 ■ TAB CONTROL 244 shadows and a background gradient and a background color to control the appearance of the content area. Along the way, we set the transition values that provide the animation when a visitor changes tabs. Because we have to get these settings to work on many different browsers, the code for those tasks makes for a large listing. Listing read more..

  • Page - 238

    245 CHAPTER 17 ■ TAB CONTROL } Listing 17-28 shows how we make a tab visible for the vertical treatment. To do so, we override the value of the opacity property to be 1, the value of the visibility property to be visible, and the value of the z-index to be 2. This collection of settings makes a tab visible. Listing 17-28. Making a Tab Visible for the read more..

  • Page - 239

    CHAPTER 17 ■ TAB CONTROL 246 Summary This chapter showed how to develop and use a tab control. As with all of our controls, we use a single block of HTML, generated from data by the function that is the heart of our control. From that block, we produced two different treatments, one horizontal and light-colored and one vertical and dark-colored. We also employed read more..

  • Page - 240

    247 ■ ■ ■ CHAPTER 18 Form Controls Forms are essential to many web sites, certainly to e-commerce sites. If we can’t gather the visitors’ information, we can’t do business, and forms are the mechanism for gathering information. So we really can’t complete the book without a chapter on forms. To build the form control, we had to build two controls. read more..

  • Page - 241

    CHAPTER 18 ■ FORM CONTROLS 248 Figure 18-2 shows the light treatment of the form control. Reducing frustration doesn’t actually boost developers’ performance, but it’s nice anyway. We appreciate anything that makes our jobs less frustrating and consequently more fun. It’s often easier and more effective to show than to tell, so let’s see what the two treatments read more..

  • Page - 242

    249 CHAPTER 18 ■ FORM CONTROLS Now that you’ve seen how they are rendered in a browser, let’s move on to the HTML behind the rendered form treatments. The HTML As with our other controls, this one doesn’t directly include HTML. Rather, a PHP function generates the HTML when the page loads. Still, we think that seeing the HTML that the control creates read more..

  • Page - 243

    CHAPTER 18 ■ FORM CONTROLS 250 Listing 18-1. The HTML Behind the Two Treatments of the Form Control <fieldset class="fieldset fieldsetTreatment1"> <legend> Contact Info </legend> <div class="formElement inputControl"> <label for="id1" class="structure">First Name<span class="required">*</span></label> read more..

  • Page - 244

    251 CHAPTER 18 ■ FORM CONTROLS <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option> </select> </div> <div class="formElement inputControl"> <label for="aid4" class="structure">Zip read more..

  • Page - 245

    CHAPTER 18 ■ FORM CONTROLS 252 We’ll cover details of the input control and of the data later in the chapter. For now, please accept that the data may contain a legend and must contain some fields and that each call to the input control returns an input element with the data in the right places. ■ Note While Listing 18-2 may seem large, a form, read more..

  • Page - 246

    253 CHAPTER 18 ■ FORM CONTROLS Now that you’ve seen the fieldset control, let’s move along to the input control, which the fieldset control uses extensively. The Input Control As we observed while describing the fieldset control, the input control returns a properly formatted input element (or other element; see later in this section) to the fieldset control (or read more..

  • Page - 247

    CHAPTER 18 ■ FORM CONTROLS 254 values of its arguments and inserts them into the corresponding attributes of the resulting input element. The $required argument needs a bit of logic to handle, as it produces two optional strings within the input element: a span that holds an asterisk and the word “required” in the element’s attributes. Once the input control has read more..

  • Page - 248

    255 CHAPTER 18 ■ FORM CONTROLS output variable, it closes the div element. Finally, the function either sends the div element and all of its children to the browser or sends a string containing all those elements back to the caller. Listing 18-4. The inputList Function function inputList($model, $labelText, $name, $type, $class, $echo) { $obj = $model; $output = read more..

  • Page - 249

    CHAPTER 18 ■ FORM CONTROLS 256 return $output; } } The inputButtons function inserts one or more button controls into a form. This is another example of using controls within controls, as we often do. Table 18-5 describes the arguments of the inputButtons function. Table 18-5. Arguments to the inputButtons Function Argument Description $model The data that goes read more..

  • Page - 250

    257 CHAPTER 18 ■ FORM CONTROLS Table 18-6. Arguments to the inputSelect Function Argument Description $model The choices that go into the list. It’s called a model because we’re used to working with the MVC (Model View Controller) pattern. $id A unique identifier for this input element. $labelText The text to use as the label for the input element. $class The value to read more..

  • Page - 251

    CHAPTER 18 ■ FORM CONTROLS 258 Table 18-7. Data Values in the JSON Object That Holds Data for a fieldset Control Value Description showLegend Whether to include a legend element in the fieldset element. legend The value to use as the content of the legend element, if a legend element should be included. fields The other data to be included in the fieldset read more..

  • Page - 252

    259 CHAPTER 18 ■ FORM CONTROLS "id": "id3", "labelName" : "Email", "name" : "email", "value" : "", "type" : "email", "placeholder" : "name@domain.com", "_class" : "", "required" : read more..

  • Page - 253

    CHAPTER 18 ■ FORM CONTROLS 260 "legend" : "Mailing Address", "fields" : [ { "formElement" : "inputControl", "id": "aid1", "labelName" : "Address", "name" : "address", "value" : "", "type" : read more..

  • Page - 254

    261 CHAPTER 18 ■ FORM CONTROLS }, { "formElement": "buttons", "buttons" : [ { "text": "Submit", "href": "#", "id" : "bid1", "type" : "primaryGlass", read more..

  • Page - 255

    CHAPTER 18 ■ FORM CONTROLS 262 the data don’t vary at all between the treatments. As usual, we’ll comment on most of the CSS rules individually, though we may lump together some of the more obvious rules. Listing 18-11 shows how we set the margins and padding values to zero (0) on the fieldset element so that those settings carry through to all elements read more..

  • Page - 256

    263 CHAPTER 18 ■ FORM CONTROLS box-shadow: inset 1px 1px 1px #777777; border: 1px solid rgba(0, 0, 0, 0.2); background: #CCC; display: block; position: relative; width: 400px; background: #ffffff url(/images/background_stripped.png); } Listing 18-15 shows how we wrap an additional border around the form to provide a bit more visual appeal. To do so, read more..

  • Page - 257

    CHAPTER 18 ■ FORM CONTROLS 264 Listing 18-17 shows how we style a fieldset control for the dark treatment (identified by fieldsetTreatment1). Since we use it as an outer element around other elements (mostly input elements and anchor elements that serve as buttons), we want the padding value to be 0 and want the position value to be relative. We also read more..

  • Page - 258

    265 CHAPTER 18 ■ FORM CONTROLS width: 14px; height: 14px; position: absolute; top: -7px; left: -7px; background: white; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } Listing 18-20 shows how we make the circle at the end read more..

  • Page - 259

    CHAPTER 18 ■ FORM CONTROLS 266 Listing 18-21. Setting the Padding for form Elements .fieldsetTreatment1 .formElement { padding: 4px 0; } Listing 18-22 shows how we style the label for a form element. We set the width to 150 pixels to provide ample room for most labels. Longer labels wrap to two lines, which should be rare and not look bad when it happens. read more..

  • Page - 260

    267 CHAPTER 18 ■ FORM CONTROLS box-shadow: inset 1px 1px 1px #999999; } Listing 18-24 shows how we set the margins for check boxes and radio buttons. We set the right margin to 3 pixels, so that we get a little separation between the check box or radio button and its label. Because different browsers handle the spacing around check boxes differently, we read more..

  • Page - 261

    CHAPTER 18 ■ FORM CONTROLS 268 Listing 18-29 shows how we style the fieldset for the light treatment (fieldsetTreatment2). First, we set a 3-pixel medium-gray top border. Then we set 15 pixels of padding on top to provide space between the top border and the fieldset’s content. Next, we set a bottom border of 20 pixels to provide space between the bottom read more..

  • Page - 262

    269 CHAPTER 18 ■ FORM CONTROLS background: -ms-linear-gradient(top, #cfeaf7 0%, #bddded 50%, #b7d1e2 51%, #cae1f7 100%); background: linear-gradient(to bottom, #cfeaf7 0%, #bddded 50%, #b7d1e2 51%, #cae1f7 100%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#cfeaf7', endColorstr='#cae1f 7', GradientType=0); } Listing 18-31 shows how we style a form element (input read more..

  • Page - 263

    CHAPTER 18 ■ FORM CONTROLS 270 Oi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJl c2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFk aWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Ag b2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjhmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUw read more..

  • Page - 264

    271 CHAPTER 18 ■ FORM CONTROLS clear: both; float: left; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4); background: #EEE; background: #e5e5e5; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRw read more..

  • Page - 265

    CHAPTER 18 ■ FORM CONTROLS 272 ■ Note As in the .fieldsetTreatment2 .inputControl input style (see Listing 18-33), this style applies to the label for the whole input element, not the labels for the individual choices (check boxes or radio buttons) within the element. Listing 18-36. Inserting a Colon after a Label for list and select input Elements read more..

  • Page - 266

    273 CHAPTER 18 ■ FORM CONTROLS Listing 18-39. An e-Mail Input Control function emailInput($id, $name, $value, $class, $echo) { $output = inputControl($id, "Email", $name, $value, "email", "name@domain.com", $class, TRUE, null, "return"); if ($echo != "return") { echo $output; } else { return $output; } } Listing 18-40 shows a read more..

  • Page - 267

    CHAPTER 18 ■ FORM CONTROLS 274 treatment in the control). Even if you don’t embrace the idea of controls, remember to write your HTML such that it can be very differently styled with a different stylesheet. That way, you can “future-proof” your work as much as possible. read more..

  • Page - 268

    275 ■ ■ ■ ■ A, B Base64 encoding anchor tags, 96 colon, 101 drop-down container, 96–97 gaming menu, 100–101 general pattern, 97–99 menu-highlighting, 100–101 .nmLI, 96 overview, 96 properties, 98–99 text shadow, 101 ul and li classes, 99 Button control, 165 code creates buttons, 170 HTML markup, 170 parameters, 168 PHP function, 168–170 CSS active state, 173 background color, read more..

  • Page - 269

    ■ INDEX 276 Cascading Style Sheets (CSS) (cont.) margins and padding values, 262 selection arrow, 272 style input elements, 266 styling labels, 266, 269 text elements, 267 treatments, 261 Content delivery network (CDN), 21, 27 CSS3. See HTML5 ■ E Embrace progressive enhancement feature detection, 15–16 HTML element, 14 someClass style, 15 style, 14 Embrace separation of concerns CSS, read more..

  • Page - 270

    277 ■ INDEX CDN, 21, 27 compress components, GZIP, 29–30 empty src/href attribute, 28–29 Expires headers, 29 expressions, CSS, 31 HTTP requests image sprites, 25–27 parallel connections, 22–25 resource files, 25 JavaScript, 30–31 minifying code, 32–33 page load time matters, 21–22 redrawing page character set, 34 dimensions, 34 DOM, 34 render types, 33 tabular content, 34 sources, read more..

  • Page - 271

    ■ INDEX 278 Modern Browser performance browser, 9 DOM, 10 HTML elements, 10 principles, 9 redraw/repaint DOM/restyling elements, 10 elements, 10 multiple events, 10 single events, 11 ■ N, O Navigation, 81 gaming submenu, 81 gradient colors, 92 generator, 91 menu item, 93–94 modern browser, 92 picker, 91 menu page, 81 menu structure basic structure, 83 content, 82 HTML, 82, 84–87 .nmUL read more..

  • Page - 272

    279 ■ INDEX HTML, 41–43 navigation scheme, 38 presentation, 38 rules, 38 tablet, 40 vertical, mobile phone, 41 devices and sites, 37–38 flexible images CSS, 46 overview, 45 server-side solution, 46–47 grids adding flexibility, 49 div crosses, 48 equal columns, 48–49 gutters, 47 mobile representation, 37 specification, 37 ■ S Scalable vector graphics (SVG) footer bar, 129 footerTopHolder read more..

  • Page - 273

    ■ INDEX 280 Table controls (cont.) CSS styles, 211 data object, 209 highlight (dark) cell, 206 HTML, 208–209 media queries CSS file, 219–220 results, 220–221 specifiers, 222 narrow treatments block, 218 cells, 218 equivalent, 218 header content, 217 nonsense characters, 219 row width, 217 turn off borders, 217 width, 217 narrow view, 206–208 page layout, 205 performance issues, 205 read more..

  • Page - 274

    Pro HTML5 Performance ■ ■ ■ Jay Bryant Mike Jones read more..

  • Page - 275

    Pro HTML5 Performance Copyright © 2012 b y Jay Bryant, Mike Jones This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or read more..

  • Page - 276

    iv Contents Foreword .............................................................................................................................xiii About the Authors...............................................................................................................xiv About the Technical Reviewer .............................................................................................xv Acknowledgments read more..

  • Page - 277

    v ■ CONTENTS HTML ............................................................................................................................................................17 CSS ...............................................................................................................................................................18 JavaScript read more..

  • Page - 278

    ■ CONTENTS vi Chapter 6: Page Template ...................................................................................................67 Setting the Boilerplate Options .............................................................................................68 Conditional Statements Around the HTML Element ......................................................................................69 Setting the Character set read more..

  • Page - 279

    vii ■ CONTENTS Chapter 10: Fractal Design Patterns .................................................................................131 Defining a Control ...............................................................................................................132 Code Consistency .......................................................................................................................................133 Simpler Updates read more..

  • Page - 280

    ■ CONTENTS viii Chapter 14: Price Control ..................................................................................................181 The Price Control ................................................................................................................181 The HTML ....................................................................................................................................................181 The CSS read more..

  • Page - 281

    ix ■ CONTENTS Styling the Tab Control........................................................................................................233 Styles for All Treatments .............................................................................................................................233 Styles for the Horizontal Treatment ............................................................................................................236 Styles for read more..

  • Page - 282

    Foreword I’ve written thousands of pages of technical documentation. For all that, I’ve never written anything I think is more important than this book. Mike and I have described a paradigm of web development that has the potential to revolutionize the profession. As we say repeatedly throughout the book, if all web developers were to adopt the methodology we describe, read more..

  • Page - 283

    xi About the Authors Jay Bryant occupies a space between two distinct fields: writing and programming. For more than two decades, he has been trying to help software developers better their game in writing for General Electric, Motorola, Dell, and other companies and programming for the New York Times Group and MorningStar, among other firms, as well as for various read more..

  • Page - 284

    About the Technical Reviewer Jeff Johnson has been working on the web for more than a decade and currently heads Studio and a Half, a web design company based in Midland, TX. He holds a B.S. in Computer Science from the University of Texas of the Permian Basin and can recite the script of the first Back to the Future movie in its entirety. Jeff, who read more..

  • Page - 285

    xiii Acknowledgments We thank the members of the UIF Team for their expertise, from which we learned so much, and for their trust and support in implementing our unusual patterns. From the leadership down, all the team members really worked at getting along with us and with each other; together they acted as one to meet the many interesting challenges we threw at read more..

Write Your Review