Archive

文章標籤 ‘css’

如何設定CSS只適用於IE使用

2012年6月26日 尚無評論

IE真的很煩，往往不同的版本CSS的效果都不太一樣，這次遇到是IE7以前的不合用

所以為了要向下相容，所以必須針對IE6 IE7 進行特別的CSS stylesheet的設定

印象中以前就看過，所以沒有花很久的時間就找到需要的資訊，試用一下~合用的呢~^^
這文章裡面有蠻多為了IE相容而彈性的參數設定，寫下來給自己以後參考一下:

只給IE瀏覽器使用

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />
<![endif]–>

只不給IE瀏覽器使用

<!–[if !IE]><!–>
<link rel=“stylesheet” type=“text/css” href=“not-ie.css” />
<!–<![endif]–>

只給IE 7瀏覽器使用

<!–[if IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie7.css”>
<![endif]–>

只給IE 6瀏覽器使用

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

只給IE 5瀏覽器使用

<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” href=”ie5.css” />
<![endif]–>

只給IE 5.5瀏覽器使用

<!–[if IE 5.5000]>
<link rel=”stylesheet” type=”text/css” href=”ie55.css” />
<![endif]–>

只給IE 7以下的瀏覽器使用

<!–[if lte IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />
<![endif]–>

把lte ->lt 就變成IE7 前的版本適用(不含IE7) ，反之如果要IE7以上的就改成 gte 即可

 

上述是整個CSS檔案去判斷要不要使用，而我們也可以在CSS檔裡針對各stylesheet 去限定只適用於哪個IE瀏覽器版本

限IE6瀏覽器使用

* html #div {
height: 300px;
}

限IE7瀏覽器使用

*+html #div {
height: 300px;
}

限IE8瀏覽器使用

#div {
height: 300px \0/;
}

限IE7 & IE8瀏覽器使用

#div {
height: 300px\9;
}

IE7瀏覽器不能使用

#div {
_height: 300px;
}

IE6瀏覽器以下不能使用

#div {
height/**/:300px; 

 

html > body
#div {
height:300px;
}

結尾…..

為啥微軟不好好走正確的路線呢~~有時間加上這些相容的參數，卻不安份的走歪路~真討厭

參考資料:http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Categories: WebDesign Tags: ,

用YUI Compressor精簡你的肥肥Javascript及CSS檔案吧

2010年10月13日 尚無評論

   小弟先前有個客戶網站用了大量特效及圖片，在監控時發現，讀取首頁時瀏覽者讀了3.1MB才能讀完，在進行瘦身後瀏覽者只要讀700KB左右就能讀完，如果不考慮網站頻寬，以現今效多瀏覽者使用的網路頻寬為2M/256K為例，前者需要12秒而後者只需3秒左右，是不是落差很大呢? 如果是你，你會想上前者這樣的網站嗎?

     網站使用者都是希望你的網站是很友善、美觀及很快速的，在現今友善化的網站，大多都使用很多javascript及css，所以相對的你將會降低的是你的網站執行效能。 為此，如何將這些javascript 及css sytle 減少系統及頻寬的loading，這就是當務首要，也是現今網站規畫中，要注意的一環。

     會影響網站效能的原因很多，今天就介紹如何做好一些上版時的動作來增加效能，先前有提及可以針對你的網站伺服器開啟使用gzip 來進行網頁的壓縮，以減少網站頻寬的使用；今天來介紹可以使用YUI Compressor工具來降低你的javascript及css style檔案的大小，因為這些都是原始碼，為了方便編輯及辨識，所以開發人員往往加上許多顯示格式所需要的字元，再加上web 2.0盛行，大量的函式庫的引用，都會讓你的檔案不小心就會慢慢變的很大。以jquery-v1.3.js來看，一百多K的檔案精簡後jquery-min-v1.3.js 只剩不到60K如果再加上gzip傳輸應該頻寬會省更大。

     以下則為該工具的介紹 :

YUI Compressor – The Yahoo! JavaScript and CSS Compressor Download
下載地址 : http://www.julienlecomte.net/yuicompressor/
The YUI Compressor requires Java version >= 1.4. （機器需要Java 1.4以上的環境）

可建立一個批處理文件，例如YUICompressor.bat，文件內容如下：

@echo off
::設置YUI Compressor啟動目錄
SET YUIFOLDER=D:\yuicompressor-2.4.2\build
::設置你的JS和CSS根目錄，腳本會自動按目錄層次查找和壓縮所有的JS和CSS
SET JSFOLDER=D:\mySite\myJS
echo 正在查找 JavaScript, CSS …
chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do (
@echo 正在壓縮 %%~a …
@java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar –charset UTF-8 %%~fa -o %%~fa
)
echo 完成!
pause & exit

參考資料:http://hi.baidu.com/zdz8207/blog/item/d644ae6ea0f2c5d181cb4ab7.html

Categories: WebDesign Tags: , ,

CSS 置中text-align: center 在Firefox無法作用

2009年12月10日 2 則評論

最近常在用CSS設定頁面
忽然發現一個很簡單的置中，在IE是正常的但竟然Firefox不支援

text-align: center;

不過想這種問題應該很多人都有解決方法了，去查了一下
找到自己覺得最好的解答，如下:

#center {
text-align: -moz-center;
!text-align: center;
}

這樣不管是IE或是Firefox都可以支援了!!
不知是哪一個瀏覽器沒照規格來~~@@

又在chrome試了一下~~不OK吶，目前找不到解法!!所以先hold住 有找到再補上囉!!

參考資訊:
text-align: center; not working in Firefox

Categories: WebDesign Tags: , ,

網頁表格隔行變色大整理

2009年8月12日 2 則評論

什麼是表格隔行變色呢?  看下圖就知道我要說的是什麼了!!

用戶插入圖片

整理目前在網路上針對網頁表格隔行變色的處理方式，用背景圖及一行一行設定的方法就不列入啦，其它大致如下:

CSS Expression

文字：color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景：background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

這是先前有在使用的方法，當初看上他是因為簡短的code就能達到該效果，不過後來才知CSS Expression並不是W3C標準的語法，只能在IE7以下使用，IE8 (微軟想開了，還是回歸標準了)及 FireFox都不支援，所以大家看看就好，還是不要用這個來處理!! 不是標準就是不會長長久久的。

CSS 定義

<style type=”text/css”><!–
#raw0 {background:#cccccc;}
#raw1 {background:#ecf6fc; }
–></style>
<!– 以下為html code–>
<table>
   ＜tr class=”raw0″>…
   ＜tr class=”raw1″>…
</table>

這雖然和一行一行寫顏色差不多，但至少他用了CSS 所以方便以後更換Style，所以還是介紹一下

CSS + Javascript

<style type=”text/css”><!–
#senfe {
   width: 300px;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
}
#senfe td {
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
}
–></style>
<script language=”javascript”><!–
function senfe(o,a,b,c,d){
   var t=document.getElementById(o).getElementsByTagName(“tr”);
   for(var i=0;i<t.length;i++){
       t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
       t[i].onclick=function(){
           if(this.x!=”1″){
               this.x=”1″;//本來打算直接用背景色判斷，FF獲取到的背景是RGB值，不好判斷
               this.style.backgroundColor=d;
           }else{
               this.x=”0″;
               this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
           }
       }
       t[i].onmouseover=function(){
           if(this.x!=”1″)this.style.backgroundColor=c;
       }
       t[i].onmouseout=function(){
           if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
       }
   }
}
//senfe(“表格名稱”,”奇數行背景”,”偶數行背景”,”鼠標經過背景”,”點擊後背景”);
senfe(“senfe”,”#fff”,”#ccc”,”#cfc”,”#f00″);

–></script>

這個方式不錯，只要載入javascript並執行一行即可達到，不過每頁都要載入是真的有點麻煩，但也只能這樣才能簡化針對Style寫的code

CSS + JQuery

<style type=”text/css”> /*注意選擇器的層疊關係*/
 .stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px}
 .stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center}
 .stripe_tb td *{padding:6px 11px}
 .stripe_tb tr.oddalt td{background:#cccccc} /*這行將給所有偶數行加上背景色*/
 .stripe_tb tr.alt td{background:#ecf6fc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*這個將是鼠標高亮行的背景色*/
</style>

<script type=“text/javascript“>
 $(document).ready(function(){
 $(“.stripe_tb tr“).mouseover(function(){ //如果鼠標移到class為stripe_tb的表格的tr上時，執行函數
 $(this).addClass(“over“);}).mouseout(function(){ //給這行添加class值為over，並且當鼠標一出該行時執行函數
 $(this).removeClass(“over“);}) //移除該行的class
 $(“.stripe_tb tr:odd“).addClass(“oddalt“); //給class為stripe_tb的表格的奇數行添加class值為oddalt
$(“.stripe_tb tr:even“).addClass(“alt“); //給class為stripe_tb的表格的偶數行添加class值為alt
 });
</script>

即然javascript可以做到，那JQuery有何做不到的，程式碼更減少了，所以如果本身系統已經使用JQuery了，可以考慮用這個方法

參考資料:
http://chinaz.com/Design/Pages/0Q23513H008.html
http://www.wowbox.com.tw/blog/article.asp?id=3077
http://www.cnblogs.com/css/archive/2008/07/23/1249622.html

Categories: WebDesign Tags: , , ,

如何用javascript控制css margin-left 參數

2009年2月12日 尚無評論

最近有case要用javascript控制css margin-left 參數

用了以下的語法控制，是沒有用的

function
setMargin()
{
document.getElementById(“Picture”).style.margin-left =
“200px”;
}


去查了一下，才知-這個符號是要拿掉才行的

function
setMargin()
{
document.getElementById(“Picture”).style.marginLeft =
“200px”;
}


這個命名的小小注意事項，看來沒有常用的人，會一直忘掉要這樣調整的
寫下來怕忘了

資料來源:
http://bytes.com/groups/javascript/527124-how-set-margin-left-ie-w-javascript

Categories: Java Script Tags: ,
分頁: 1 2 下一頁