Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры.

Slides:



Advertisements
Similar presentations
Wordpress Training with Sarah Sibert. How To... Removing elements from your theme – search bar/dates on posts/comments Change the styling of headings.
Advertisements

CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. September 22, 2010—All HTML code brought to XHTML standards. Reference for CIS127 and.
Session 10 Dynamic HTML: Cascading Style Sheets™ (CSS), Object Model and Collections Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.
Very quick intro HTML and CSS. Sample html A Web Title.
FORMATTING IN CONTEXT. FOLLOW UPS ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across.
Pemrograman Teknologi Internet W09: DOM & DHTML. 2 Objectives DOM: DOM: DOM Nodes & Trees DOM Nodes & Trees Traversing & Modifying DOM Trees Traversing.
Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
Today’s objectives  Element relations – tree structure  Pseudo classes  Pseudo elements.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
JQuery The Way to JavaScript and Rich Internet Applications.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Using CSS (Cascading Style Sheets) Effie Nadiv Edited by permission from author by Amir Kirsh.
Internet Design Issues and Internet Explorer 7 Let’s Take a Look at IE 7+ Goto IE7 (Click Here)
With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.
CSS(Cascading Style Sheets )
Diliev.com & pLOVEdiv.com  DIliev.com.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Button хийх.
Browser Toolbars You Shouldn’t Do Without How the WAT and WDT Can Help You Design Accessible Websites.
 CSS ids  Pages  Sites  HTML: class=“name”  Names may define format OR content › Either works  CAN apply multiple classes to the same tag  Multiple.
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thur 14:00 – 16:50) TA: Jackie Lo.
Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.
Cascading Style Sheets Controlling the Display Of Web Content.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
CSS Евгения Ковачева. BODY { PADDING-RIGHT: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-LEFT: 0px; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-FACE-COLOR:
Web Design Transparent Backgrounds. Why : Allow text to appear clearly above a graphic background image that still can be seen in the background. Without.
Primaries: magenta, yellow, and cyan This color system is called subtractive because: each primary color absorbs (subtracts) a certain part of the color.
4.1 JavaScript Introduction
Basics of Smarajit Dasgupta.
Tutorial 6 By Sam INE 1020 Introduction to Internet Engineering 1 DHTML & CSS Tutorial 6.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
ITP 104.  Basic HTML using and form  Using Filezilla  public_html ▪ 755 permission  Have a directory name itp104 ▪ 755 permission  classpage.html.
CITS1231 Web Technologies JavaScript and Document Object Model.
Adding Graphics to Web Pages. CSS does not have any properties specifically aimed at formatting images Use properties you have already learned, i.e.,
 Website development process  CSS  Javascript.
 Komodo Edit Project › Helping you find your folder  Laptop › Delete what you don’t need › Keep class “doodles” in a single “sandbox” folder  Isis.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
2 Web Standards and IE7 Embracing the Future, Managing the Past.
 2001 Deitel & Associates, Inc. All rights reserved. 1 Chapter 20 – Dynamic HTML: Object Model and Collections Outline 20.1Introduction 20.2Object Referencing.
Chapter 15 DHTML: Filters and Transitions CIS 275—Web Application Development for Business I.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
CSS3   
WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB.
The Web Wizard’s Guide to HTML Chapter Three Colors, Patterns, and Inline Graphics.
Adding a background image with CSS- The absolute basics CIT WINTER SEMESTER 2014 PRESENTED BY COLBY GRIFFITHS.
AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
What to Style? Styles for elements establish consistency –Styles for HTML or body become the default –Only create styles for pre-defined elements* Styles.
Lesson 30: JavaScript and DHTML Fundamentals. Objectives Define and contrast client-side and server-side technologies used to create dynamic content for.
 2000 Deitel & Associates, Inc. All rights reserved. Chapter 15 – Dynamic HTML: Object Model and Collections Outline 15.1Introduction 15.2Object Referencing.
Project 7: Exploring DHTML Essentials for Design JavaScript Level Two Michael Brooks.
Selective Formatting. Auto Grader Multiple selectors  May use the same formatting for two elements h1, h2 { font-family: cursive; }  Maintains consistency.
 Pictures  Page backgrounds  Element backgrounds (list items!)  Link displays (arrows)  List markers.
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Introduction to Web Site Development Department of Computer Science California State University, Los Angeles Lecture 9: JavaScript.
DHTML.
Web Basics: HTML/CSS/JavaScript What are they?
HTML Images CS 1150 Spring 2017.
Images and Backgrounds
Colors.
Working with Dynamic Content and Styles
Anatomy of HTML5 sites and Metro style apps using HTML5
HTML Images CS 1150 Fall 2016.
Presentation transcript:

Тонкий CSS для Internet Explorer Павел Корнилов

Браузеры

Internet Explorer Ошибки

HTML Имя: PNG

CSS :hover opacity inherit :first-child

Решения DHTML Behaviors expression Иногда верстать таблицами

DHTML Behaviors Подключение: behavior: url(behavior.htc); Внутри: jScript или VBScript

Whatever:hover body { behavior: url(hover.htc) } Лечит: :hover :active

IE PNG Fix img, div { behavior: url(iepngfix.htc) } Лечит альфа прозрачность у PNG: картинки фон

Expression.mydiv { a: expression(alert(), b, c = 1); } Что это за конструкция?

Особенность Исполняется при каждом действии пользователя После каждого блока ставится запятая with(this), this - необязателен

В ней работает Вызов функции Анонимные функции Присваивание переменной (true) ? 1 : 2 комментарии // и /**/ Конкатенация

Не работает Точка с запятой if … else Иногда, пробелы

function expression() { // колдовской код }

Похоже?

Style Три способа: style currentStyle runtimeStyle

Примеры Вспомните JavaScript

alt и title img { behavior: expression( (this.alt&&!this.title) ? this.title = '' : '' ) }

alt и title img { behavior: expression( (alt&&!title) ? title = '' : '' ) }

alt и title img { behavior: expression( (alt&&!title) ? title = '' : '', runtimeStyle.behavior = 'none' ) }

alt и title img { behavior: expression( runtimeStyle.behavior = 'none', (alt&&!title) ? title = '' : '' ) }

alt и title img { scrollbar-face-color: expression( runtimeStyle.scrollbarFaceColor = '#fff', (alt&&!title) ? title = '' : '' ) }

background и png filter: expression( (runtimeStyle.filter == '') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\ "')[1]+', sizingMethod=crop)' : runtimeStyle.filter, runtimeStyle.backgroundImage = 'none' )

IMG и PNG filter: expression( (runtimeStyle.filter==''&&className!='ie')? (h = this.insertAdjacentHTML('afterEnd', ' '), style.display = 'none‘) : '', runtimeStyle.filter = 'none' )

Павел Корнилов